Я цікавлюся семантикою взагалі, але якщо семантика приходить на допомогу веб-розробникам із метою допомогти їм поліпшити веб, то таким шансом просто гріх не скористатися. Уся проблема криється в тому, що веб-майстри не розуміють, що зміниться від використання семантичної розмітки документа.
Саме тому я й вирішив написати цю статтю, яка пояснює необхідність дотримуватися семантики веб-документів.
Що таке семантично правильний документ?
Я думаю, що для веб-розробника дуже важливо переглядати створені ними самими HTML-документи з відключеним зовнішнім форматуванням, будь це CSS, JavaScript і, якщо хочете, навіть без зображень - тільки зміст.
А тепер пробіжіться по цій сторінці очима. Ви можете в тексті знайти заголовки й важливі фрази?
Якщо відповідь позитивна, то Ваш документ дотримується семантики.
Використання елементів і приклади грамотної та безграмотної розмітки
Отже, давайте поговоримо про семантичні HTML-елементи. У першу чергу, це елементи заголовків (від <h1> до <h6>), абзаци (<p>), списки (<ul>, <ol>), логічного виділення найбільш важливих фраз у тексті (<strong> - напівжирним, <em> - курсивом), елемент форми, що зв'язує поле мітки LABEL із полем форми (<label>).
Тепер гарненько обміркуйте, як буде найбільш грамотно розмітити Ваш зміст, і приступайте до справи, використовуючи вищевказані елементи.
Тепер мені хотілося б поговорити про методи верстки: таблична і безтаблична.
Таблична верстка – в основі таблиця. Весь зміст перебуває в осередку цих самих таблиць, код дуже важко сприймати, особливо коли використовуються вкладені таблиці. До того ж даний метод застарілий.
При безтабличній верстці зміст знаходиться в елементах семантичної розмітки із привласненими css-стилями. Такий метод грамотний і сучасний! Необхідно розділяти семантику документа і його оформлення, що ми й отримаємо при безтабличній верстці.
У таблицях необхідно розміщати тільки відповідні табличні дані, такі як статистичні дані, розклади й т.д.
А тепер давайте я Вам наведу, як приклад, 2 фрагменти коду з табличною й безтабличною розміткою HTML-документу, а Ви їх порівняєте та скажете, який краще, простіший, легший, елегантніший та зрозуміліший!
Поганий приклад
<table id="web-site-container" width="100%">
<tr>
<td id="navigation">
<table width="100%">
<tr>
<td>
<a href="http://www.apple.com/macosx/">Mac OS X Leopard</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.microsoft.com/windows/products/windowsvista/default.mspx">Windows Vista</a>
</td>
</tr>
<tr>
<td>
<a href="http://en.wikipedia.org/wiki/Semantic_Web">Wikipedia: Semantic Web</a>
<table>
<tr>
<td>
<a href="http://www.sciam.com/article.cfm?articleID=00048144-10D2-1C70-84A9809EC588EF21">The Semantic Web article</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td id="content">
<div class="heading">
Web site name/Document name
</div>
<!-- Let is a lot of <code><br></code> elements here to get a nice bottom margin -->
<br><br><br><br><br><br>
<div>
This is <span style="font-style: italic">the best content</span> text ever written.
</div>
<div>
<!-- are great for indenting text! -->
Indented pre-amble text explaining something.
</div>
</td>
<td id="contact-form">
<form action="/contact" method="post">
<div>
Name: <input type="text">
<input type="submit" value="Send">
</div>
</form>
</td>
</tr>
</table>
Грамотний приклад із використанням семантики
<div id="web-site-container">
<div id="navigation">
<ul>
<li>
<a href="http://www.apple.com/macosx/">Mac OS X Leopard</a>
</li>
<li>
<a href="http://www.microsoft.com/windows/products/windowsvista/default.mspx">Windows Vista</a>
</li>
<li>
<a href="http://en.wikipedia.org/wiki/Semantic_Web">Wikipedia: Semantic Web</a>
<ul>
<li>
<a href="http://www.sciam.com/article.cfm?articleID=00048144-10D2-1C70-84A9809EC588EF21">The Semantic Web article</a>
</li>
</ul>
</li>
</ul>
</div>
<div id="content">
<h1>
Web site name/Document name
</h1>
<!-- Bottom margin is applied through <acronym title="Cascading Style Sheets">CSS</acronym> to the <code><h1></code> element -->
<p>
This is <em>the best content</em> text ever written.
</p>
<!-- Indentation is applied through a general "pre-amble" <acronym title="Cascading Style Sheets">CSS</acronym> class -->
<p class="pre-amble">
Indented pre-amble text explaining something.
</p>
</div>
<div id="contact-form">
<form action="/contact" method="post">
<div>
<label for="user-name">Name</label>: <input id="user-name" type="text">
<input type="submit" value="Send">
</div>
</form>
</div>
</div>
Ну як Вам? Що скажете?
Розмежовуйте семантику та оформлення документа
Усвідомте для себе одну просту річ: HTML відповідає за семантику документа, CSS – за його оформлення. І ніяк інакше. Крім цього використовуйте кожний елемент по його прямому призначенню, наприклад, ніколи не використовуйте елемент заголовка з метою банального збільшення розміру шрифту, а елемент <blockquote> для виділення тексту.
Мені часто ставлять запитання на рахунок елементів списку: «У яких випадках використовувати маркірований, а в яких немаркований списки?». Особисто моя думка така, що головне його використовувати по прямому призначенню, тобто для створення списків, а інше вже на Ваш розсуд, тому що семантика - не зовнішній вигляд.
Переваги семантичної розмітки
Далі йде список, у якому перераховані кілька переваг від семантичної розмітки документів:
- Підвищується доступність, тому що сторінки Вашого сайту не втратять своєї структури навіть при відключеному або не підтримуваному CSS;
- Зміст сторінок Вашого сайту буде зрозумілий для людей, які читають сайти за допомогою спеціальних програм для читання з екрану;
- Семантична розмітка впливає на пошукові системи, тому що їхнім роботам не важко індексувати сторінки та визначати істинне значення тих або інших фрагментів тексту;
- Значно спрощується подальша підтримка, таким чином, зверстаного сайту, знижуються витрати на редизайн;
- Зменшується вага сторінок сайту, підвищується читабельність коду сайту за рахунок його компактності, збільшується швидкість завантаження сторінок сайту.
Оригінал статті: Explaining semantic mark-up
Шаблони та дизайн 
