В последнее время стало очень модным такое понятие как семантика.
Википедия даёт следующее определение: «Семантика — система правил определения поведения отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.» Это применительно к языку.
Ну а применительно к HTML, простыми словами — теги, названия ID и классов элементов должны соответствовать их содержимому по смыслу.
Приведу простейший пример — у нас есть следующее определение:
Капитан Очевидность (англ. Captain Obvious)
— уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.
Как напишет код верстальщик не знакомый с понятием «семантика»:
<p><strong>Капитан Очевидность (англ. Captain Obvious)</strong><br /> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</p> |
<p><strong>Капитан Очевидность (англ. Captain Obvious)</strong><br /> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</p>
А вот как напишет этот код верстальщик, с ним знакомый:
<dl><dt>Капитан Очевидность (англ. Captain Obvious)</dt><dd> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</dd></dl> |
<dl><dt>Капитан Очевидность (англ. Captain Obvious)</dt><dd> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</dd></dl>
Здесь использованы подходящие по смыслу элементы HTML: <dl>
— это Definition List (список определений), <dt>
— Definition Term (имя определяемого термина), <dd>
— Definition Description (определение термина). А выделение жирным имени термина задано с помощью CSS.
Ну и ещё как пример — классическое меню, сделанное с помощью неупорядоченного списка:
<ul id="nav">
<li><a href="/about/" title="О компании">О компании</a></li>
<li><a href="/services/" title="Услуги">Услуги</a></li>
<li><a href="/contacts/" title="Контактная информация">Контактная информация</a></li>
</ul> |
<ul id="nav">
<li><a href="/about/" title="О компании">О компании</a></li>
<li><a href="/services/" title="Услуги">Услуги</a></li>
<li><a href="/contacts/" title="Контактная информация">Контактная информация</a></li>
</ul>
Такую разметку будет потом очень просто оформить с помощью CSS.
В процессе написания семантического кода приходится думать над названиями, порядком элементов, над тем какой тег использовать, что выбрать, таблицу, маркированный список или список определений, использовать class или ID, и т.п.
Что использовать, ID или class?
В интернетах с завидной регулярностью задают этот вопрос, постараюсь ответить.
ID — это имя уникального элемента на странице, я использую его для структурной разметки (#header
, #content
, #aside
, #footer
), для элементов формы и для элементов, к которым в дальнейшем планирую обращаться через jQuery. В последнем случае, конечно, можно использовать и классы… Но грамотней использовать ID, так как селектор $("#id")
работает гораздо быстрее, чем $(".class")
, по причине того, что используется DOM-функция getElementById()
. А если элемент не уникален на странице (их несколько), то желательно положить его в блок с ID и обращаться к нему так: $("#id .class")
. Такой селектор будет работать быстрее чем $(".class")
, так как поиск элемента будет производиться только в блоке #id
, а не во всём документе. Отвлёкся немного в сторону jQuery, но это тоже полезно знать. 
Регулярно в чужом коде встречаю названия классов привязанные к отображению, например: class="column-red-150-border-black"
. Это семантически некорректно, и в таком коде разбираться гораздо тяжелее. Не рекомендую такой код. 
Ещё пример — в моём блоге, в разделе Эбаут используется микроформат hCard (микроформаты вообще интересная штука):
<div class="vcard">
<span class="n"><span class="fn"><span class="family-name">Коромыслов</span> <span class="given-name">Алексей</span></span> <span class="additional-name">Георгиевич</span></span>
<p>Родился <abbr class="bday" title="1987-04-14">14 апреля 1987 года</abbr>. Работаю <abbr title="разработчик ПО" class="role">разработчиком ПО</abbr> в компании «<a href="http://profit-labs.ru/" class="org">ProfIT Labs Ltd</a>».</p>
<p>В сети «известен» под ником «<span class="nickname">lazymozzy</span>».</p>
<h3>Контактные данные</h3>
E-mail: <a class="email" href="mailto:alexey@koromyslov.ru">alexey@koromyslov.ru</a>
Skype: <a class="skype" href="skype:lazymozzy">lazymozzy</a>
</div> |
<div class="vcard">
<span class="n"><span class="fn"><span class="family-name">Коромыслов</span> <span class="given-name">Алексей</span></span> <span class="additional-name">Георгиевич</span></span>
<p>Родился <abbr class="bday" title="1987-04-14">14 апреля 1987 года</abbr>. Работаю <abbr title="разработчик ПО" class="role">разработчиком ПО</abbr> в компании «<a href="http://profit-labs.ru/" class="org">ProfIT Labs Ltd</a>».</p>
<p>В сети «известен» под ником «<span class="nickname">lazymozzy</span>».</p>
<h3>Контактные данные</h3>
E-mail: <a class="email" href="mailto:alexey@koromyslov.ru">alexey@koromyslov.ru</a>
Skype: <a class="skype" href="skype:lazymozzy">lazymozzy</a>
</div>
Используемые здесь полное имя (fn), организация (org), адрес электронной почты (email) и пр. определены с использованием определённых имён классов, а для всего блока задан class="vcard"
, который показывает, что вложенные классы принадлежат hCard. Например Яндекс уже начал поддерживать микроформаты.
Стоит знать, что валидный код и семантика не помогут побороть баги IE. Прежде всего стандарты и семантика способствуют меньшему количеству ошибок и лучшей читаемости кода — в итоге меньше времени будет затрачиваться на поиск элементов и исправление ошибок. Также семантически структурированную разметку любят поисковики, что в свою очередь ведёт к более высоким строчкам в поисковой выдаче.