Расставив все точки над семантикой

В этой статье мы объединили уже изложенные мысли многих людей (Флак.ру, Пепелсбей.net и некоторые другие), которые почему-то так и не были донесенны до большинства.

Часть 1. Теория.

Семантика — наука о понимании определенных знаков, последовательностей символов и других условных обозначений.

В данный момент мы говорим о семантике в HTML-верстке. Поэтому заведомо не будем проводить все ее связи с лингвистикой.

Прежде всего, семантика в верстке — это совокупность смысловых отношений, возникающих в документе. Однако для существования таких отношений необходим документ, который возникает благодаря внедрению HTML-разметкив простой текст.

Семантика невозможна без валидности, несмотря на явную разность этих двух понятий. Вы можете сверстать валидный сайт, но без структурной разметки это будет всего лишь популизм.

Так же семантика невозможна без внедрения в код микроформатов.

Микроформаты — это способ внедрения специфических семантических данных в HTML.

Но, стоп, это не все. Стоит заведомо сказать, что семантика как таковая делится на три раздела, которые все три стоит учитывать:

• Правильное применение HTML-элементов;
• Именование элементов;
• Комбинация именованных элементов.

Вывод части: Поэтому, для тех, кто в танке, давайте прежде, чем выкладывать свои коды, все таки думать.

Часть 2. Перед практикой.

То, с чего должна начинаться верстка, это с указания правильного DOCTYPE`а.

Согласно спецификациям HTML и XHTML DOCTYPE (что означает «объявление типа документа») сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Он должен всегда находиться в первой строке каждой страницы. DOCTYPE — ключевой компонент web-страниц, претендующих на соответствие стандартам.

Все подробности уже давно бережно описаны Джеффри Зельдмана в переводе Макса Россомахина «Почему так важен DOCTYPE».

Часть 3. Начало

Так как мы хотим добиться не только валидной семантическй разметки, но еще и кроссбраузерной, я рекомендую использовать «сброс стилей». Для этого воспользуемся статьей Эрика Мейера или одним из этих вариантов.

Итак. Чтобы все таки окончательно убедиться для чего используются те или иные элементы (если вы не уверены ;) необходимо обратиться к спецификации HTML 4.01.

Отрывок спецификации о элементе ADDRESS:

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS %attrs; -- %coreattrs, %i18n, %events -->
The ADDRESS element may be used by authors to supply contact information for a 
document or a major part of a document such as a form. This element 
often appears at the beginning or end of a document.

В добавлении: POSH — Plain Old Semantic HTML (использование HTML-элементов по их назначению), — «старый добрый семантический HTML».

Часть 4. Учимся думать.

Ну что ж. Давайте приведем пример. Самое просто, что есть это простой неупорядоченный список. Чаще всего это меню сайта. Как можно его сверстать, держа в голове «верстка дивами, именование элементов …».

<div id=”menu”>
<a href=”#”>Пункт 1</a><br>
<a href=”#”>Пункт 2</a><br>
<a href=”#”> … </a><br>
</div>

Теперь давайте посмотрим спецификацию и выберем что же наиболее нам подходит для семантически правильного решения данного вопроса.

Мы выбираем неупорядоченный список <ul> c элементами списка <li> внутри, а визуальное форматирование — в CSS. Почему мы так решили? Ответ вполне очевиден: в исходном коде у нас есть корневой группирующий элемент, неупорядоченный список пунктов, элементы визуального форматирования.

Немного усложним ситуацию и применим все 3 составляющие семантики:

В качестве примера возьмем описанный нами элемент ADDRESS.

Иван Васильев, ivan@exmail.ru

Рассмотрим подробнее, что у нас есть. Есть персона, ее стоит озаглавить, и есть явный адрес. Следовательно, правильно разместим информацию с помощью HTML-элементов:

<h1>Иван Васильев</h1>
<address>ivan@exmail.ru</address>

Далее следую пункту два, правильно назовем классы всех элементов:

<h1 class=”name”>Иван Васильев</h1>
<address class=”email”>ivan@exmail.ru</address>

Чем дальше, тем сложнее. Вспомним (ну если не вспомним, то прочитаем) о микроформате hCard. Используем корневой класс, указание имени, фамилии и электронной почты.

<div class=”vcard”>
<h1 class=”fn n”>
<span class=”given-name”>Иван</span>
<span class=”family-name”> Васильев</span>
</h1>
<address class=”email”>ivan@exmail.ru</address>
</div>

Итак, мы получили полноценную визитную карточку. И все таки: hCard — это клон старого-доброго vCard, формата электронной визитки, в терминах XHTML. Внедряется бесконечно просто: создается (или изменяется текущий) элемент (обычно div или span) с именем класса vcard (значением атрибута class="vcard"). В нем создаются дочерние элементы с именами классов, соответствующие полям vCard/hCard.

На сайте Sphinx.net.ru достаточно подробно описаны другие аспекты введения в микроформаты.

Часть 5. Не забудем братьев меньших. IE и его причуды.

Думать научились, начинаем действовать. Но вот проблема, в IE все не так как хотелось. Думаем дальше. Есть два выхода из этой ситуации:

• «star html hack»;
• conditional comments;

Первое — «star html hack». В кратце:

#element {
position: relative; /* Основное правило для всеx браузеров */
}
* HTML #element {
position: static; /* Переопределение правила для IE младше седьмой версии */
}

Подробности уже давно ждут вас. Но не стоит забывать, что такие хаки для браузера Internet Explorer засоряют код, подгружаемый и всеми остальными браузерами.

Второе — conditional comments. Или проще говоря обычное подключение CSS-файлов, но видимое только IE.

<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all"/><![endif]-->

Опять же, подробности.

Часть 6. Долгожданная блочная верстка.

И действительно, чего это называется все верстка блоками, а про блоки и не слова.

Я не буду описывать здесь что-то подробное, так как не для этого я писал эту обзорную статью, все уже написано до меня. Вот это полезно прочитать:

• Семантическая верстка, часть III — блочная модель;
• Семантическая верстка, часть IV — создание «резиновых» макетов с использованием отрицательных полей.

Часть 7. ID и class.

Вначале давайте поймем что такое ID, что такое class. ID — это имя уникального элемента, class — это общее имя множества элементов и, соответственно, их общая семантическая роль.

Поэтому, удобнее ID использовать для описания структурной разметки.

<body>
<div id="header"> … </div>
<div id="content"> … </div>
<div id="footer"> … </div>
</body>

При именовании важно помнить о множественных классах для одного элемента. Например:

<a href="http://yandex.ru/" class="fn org url">Яндекс</a>

Отсюда становится ясно следующее: что эта ссылка ведёт на сайт (url) организации (org) под названием (fn) «Яндекс».

Таким образом, применяя id для структурной разметки, мы создаем некие пространства имен, благодаря которым мы можем адресовать применение стилей для элементов с одинаковыми смысловыми ролями и, соответственно, именами классов.

Семантически верное именование HTML-элементов при помощи атрибутов id и class, помимо самой семантики, привносит упорядоченность не только в сам документ, а еще и в процесс разработки.

Часть 8. Подробнее о микроформатах и комбинации именованных элементов.

• Microformats — официальный блог и wiki-документация;
• Microformatique — блог Джона Оллсопа (John Allsopp);
• Микроформаты — о микроформатах по-русски на Хабрахабре.

Пример использования, написанный Вадимом Макеевым:

Разметка имени пользователя и маленькой иконки рядом, который используется в сервисе блогов Livejournal.com. Вот, каким образом это выглядит сейчас:

<span class='ljuser' lj:user='kuteev' style='white-space: nowrap;'>
<a href='#'>
<img src='#' alt='[info]' width='17' height='17'
style='vertical-align: bottom;
border: 0; padding-right: 1px;' />
</a>
<a href='#'>
<b>kuteev</b>
</a>
</span>

Полезного:

• Юзернейм не переносится, ибо white-space: nowrap;
• Головастика выровняли по вертикали, отключили у него рамку, отступ и задали размеры — width='17' height='17' style='…';
• Кутеев, оказывается, полужирный, поскольку <b>kuteev</b>.

Но что можно сделать с помощью микроформата hCard:

<span class="ljuser vcard">
<a href="#" target="_blank"
class="ico" title="Профиль">
<img src="#" alt="" />
</a>
<a href="#" target="_blank"
class="fn nickname url" title="Журнал">
kuteev
</a>
</span>

Что же нового мы теперь можем узнать:

• Мы имеем дело с мини-визиткой Кутеева, потому как class="vcard";
• Ссылка с головастика ведет в профиль — мы уточнили title="Профиль";
• Никнейм Кутеева — kuteev, мы видим class="fn nickname";
• Ссылка с никнейма ведёт на сайт Кутеева — class="nickname url", а точнее — в журнал, — мы уточнили title="Журнал".

Соответственно,вся информация из приведенных примеров становится доступна поисковым машинам и плагинам ваших браузеров, поскольку ее разметка формализована в спецификации микроформата hCard.

Часть 9. Итак!

Давайте все-таки прочитаем оригиналы статей, выучим наизусть и не будем больше заниматься глупостями:

• Семантическая верстка. Часть I;
• Семантическая вёрстка. Часть II;
• Семантическая верстка — советы и решения. Часть I. Капля теории, DTD и ластики;
• Семантическая верстка — советы и решения. Часть II. Хаки-шмаки, даем люлей IE;
• Семантическая верстка — советы и решения. Часть III. Блочная модель;
• Семантическая верстка — советы и решения. Часть IV. Создание «резиновых» макетов с использованием отрицательных полей;
• Семантическая верстка — советы и решения. Часть V. Навигация по сайту или укрощение списков.