Добро пожаловать на сайт Quasiocculti

Блог об интернет-технологиях

Немного о веб семантике

Итак, семантическая верстка предполагает, что все структурные элементы используются исключительно по прямому назначению. Например 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.

Впрочем, для таких случаев существуют форумы, живое общение и телефонная связь. Мы же вернемся назад к семантике и попробуем определить основные ее правила:

  1. Используйте ID и классы продуманно и только там, где это действительно необходимо
  2. Назначайте ID и классам функциональные и понятные имена (например, #whatsNew или .sideWidget)
  3. Создавайте максимально краткие и допустимо длинные имена

Если следовать этим нехитрым правилам, вы получите профессионально выполненный и понятный 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>
Комментарии
Новый комментарий
Имя:
Для редактирования комментария осталось 10 минут
Quasiocculti

Блог об интернете и интенет-технологиях. Рассказываем об интересных событиях c 2012 года.

Поиск
Популярные хештеги: