Итак, семантическая верстка предполагает, что все структурные элементы используются исключительно по прямому назначению. Например h1...h6 в разметке - это заголовки, p - параграфы с текстом, ul, ol, dl - это списки. Понятие семантической разметки вообще возникло в те времена, когда целые сайты верстались в виде таблиц, заголовки становились параграфами, а верстальщики мечтали о лучших способах структурного представления элементов разметки.
Справедливости ради, отметим, что в те далекие времена в распоряжении верстальщика было гораздо меньше возможностей по реализации поставленных перед ними задач, чем сейчас. Например, трехколоночная компоновка сайта когда-то была просто невозможна без использования таблиц.
Теперь темные времена позади, и в нашем распоряжении есть достаточно источников, как например, спецификация HTML 5, из которых разработчики могут получить рекомендации и информацию о том, какие значимые элементы должны составлять HTML-код страницы вместо обезличенных div'ов и span'ов. Вещи вроде бы и так понятные, однако в список элементов HTML 5 все-таки необходимо заглядывать для того, чтобы не ошибиться в выборе. Справедливости ради, отметим, что описания не всегда легки в понимании:
The details element represents a disclosure widget from which the user can obtain additional information or controls. However, the details element is not appropriate for footnotes.
Впрочем, для таких случаев существуют форумы, живое общение и телефонная связь. Мы же вернемся назад к семантике и попробуем определить основные ее правила:
Если следовать этим нехитрым правилам, вы получите профессионально выполненный и понятный HTML-код, к работе с которым вы сможете вернуться в любое время.
Проиллюстрирую все вышесказанное всего одним примером. Какое их приведенных ниже имен вы считаете наиболее понятным:
<p class="cf">Lorem ipsum dolor sit amet, consectetur</p>
<p class="clear_fix">Lorem ipsum dolor sit amet, consectetur</p>
<p class="clearFix">Lorem ipsum dolor sit amet, consectetur</p>