Тег: CSS

В последнее время стало очень модным такое понятие как семантика.

Википедия даёт следующее определение: «Семантика — система правил определения поведения отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка.» Это применительно к языку.

Ну а применительно к HTML, простыми словами — теги, названия ID и классов элементов должны соответствовать их содержимому по смыслу.

Приведу простейший пример — у нас есть следующее определение:

Капитан Очевидность (англ. Captain Obvious)
— уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.

Как напишет код верстальщик не знакомый с понятием «семантика»:

<p><strong>Капитан Очевидность (англ. Captain Obvious)</strong><br /> — уникальный супергерой, который всегда готов прийти на помощь Анонимусу, чтобы высказать прописную истину.</p>

А вот как напишет этот код верстальщик, с ним знакомый:

<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>

Такую разметку будет потом очень просто оформить с помощью 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>

Используемые здесь полное имя (fn), организация (org), адрес электронной почты (email) и пр. определены с использованием определённых имён классов, а для всего блока задан class="vcard", который показывает, что вложенные классы принадлежат hCard. Например Яндекс уже начал поддерживать микроформаты.

Стоит знать, что валидный код и семантика не помогут побороть баги IE. Прежде всего стандарты и семантика способствуют меньшему количеству ошибок и лучшей читаемости кода — в итоге меньше времени будет затрачиваться на поиск элементов и исправление ошибок. Также семантически структурированную разметку любят поисковики, что в свою очередь ведёт к более высоким строчкам в поисковой выдаче.