Семантическая вёрстка. Часть вторая

24 апреля ’08

Современный взгляд на организацию кода. По материалам доклада «Семантическая вёрстка» на конференциях ClientSide 2007 и UA Web 2008. Продолжение.

Начало — «Семантическая вёрстка. Часть первая».

Второй уровень семантики

Для создания второго смыслового уровня документа у нас есть два способа именования элементов: id и class. Каждый имеет свои особенности, в силу которых формируются типичные ситуации применения каждого из них.

Имя элемента характеризует его функциональность или содержимое: упорядоченный список (первый уровень семантики) комментариев (второй уровень семантики).

<ol id="comments">
    <li>Первый</li>
    <li>Второй</li>
</ol>

Согласно спецификации, id — это имя уникального элемента, в большей степени подходит для создания структурной разметки документа:

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

В отдельном случае, id применяется для создания связей ярлык-поле при помощи атрибута for элемента <label>:

<label for="full-name">
    Полное имя
</label>
<input type="text" id="full-name"/>

В то время, как class — это общее имя множества элементов и, соответственно, их общая семантическая роль. Множественные классы для одного элемента позволяют удобно комбинировать не только стили, но ещё смысловые значения нескольких имён. Данный фрагмент микроформата hCard говорит нам о том, что эта ссылка ведёт на сайт (url) организации (org) под названием (fn) «Яндекс»:

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

Таким образом, применяя id для структурной разметки, мы создаём некие пространства имён, благодаря которым мы можем адресовать применение стилей для элементов с одинаковыми смысловыми ролями и, соответственно, именами классов. В качестве примера такой ситуации, можно привести оформление ссылок на RSS-поток, которые в шапке и подвале документа, в нашем случае, должны отличаться цветами:

<div id="header">
    <a href="#" class="rss">RSS</a>
</div>
<div id="footer">
    <a href="#" class="rss">RSS</a>
</div>

.rss {
    padding-left:20px;
    background:url(rss.png) no-repeat;
    }
#header .rss {
    color:#C00;
    }
#footer .rss {
    color:#069;
    }

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

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

Третий уровень семантики

Основа интернета — это гипертекстуальность, т.е. связь документов при помощи гиперссылок, создающая единое информационное пространство сети. Говоря же о третьем уровне семантики, мы подразумеваем создание смысловых связей между семантическими единицами в документе.

Единственным внятным примером этого механизма на данный момент являются микроформаты (μf). Идейным вдохновителем данной методики семантической разметки является Тантек Челик (Tantek Çelik), известный нам по работе над IE for Mac, Box Model Hack и проекту Technorati.

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

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="Журнал"
Пара нажатий — и Кутеев добавлен в мою адресную книгу

Данный код был написан мною для проекта Livejournal.ru, где таким образом были размечены все имена пользователей. Надеюсь, что в скором будущем подобная разметка будет использоваться и на Livejournal.com.

Следующий пример более абстрактен и демонстрирует разметку информации о компании при помощи микроформата hCard, которая дополняется картой расположения офиса, при помощи Google Maps API:

<div class="vcard">
    <h1 class="fn org">Яндекс</h1>
    <dl>
        <dt>Адрес:</dt>
        <dd class="adr">
            <span class="postal-code">111033</span>,
            <span class="locality">Москва</span>,
            <span class="street-address">
                ул. Самокатная, дом 1
            </span>
        </dd>
    <dl>
    <div id="map" class="geo">
        <abbr class="latitude" title="55.7582">
            N 55° 75.82
        </abbr>
        <abbr class="longitude" title="37.6786">
            W 37° 67.86
        </abbr>
    </div>
</div>

Мы имеем дело с визиткой организации и называется она «Яндекс» — class="fn org"
У нас есть её структурно размеченный адрес: postal-code, locality, street-address
Также нам известно точное географическое положение организации, обозначенное в в элементах <abbr>: class="latitude" и title="55.7582", class="longitude" и title="37.6786"
При помощи несложного JavaScript-кода и Google Maps API мы извлекаем информацию о координатах и рисуем в элементе с id="map" карту, спозиционированную точно в нужном месте
Пара нажатий — и «Яндекс» добавлен в мою адресную книгу

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

Плагины для Firefox — Operator и Tails Export
Плагин для Safari — Safari Microformats

Семантика! Почему это важно

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

Повышение доступности сайта для альтернативных устройств просмотра. Речь идёт о всех устройствах, альтернативных привычному десктопному браузеру: мобильные и голосовые браузеры, принтеры, поисковые роботы. Для всех из них очень полезен первый уровень семантики в документе — т.е. логичная разметка информации:

Мобильный браузер легко обработает валидный код, не переполненный презентационной разметкой, который, в большинстве случаев, окажется ещё и компактнее. В случае с предварительной обработкой страницы, как происходит при работе с Opera Mini, мы получаем, по меньшей мере, два преимущества: отсутствие потенциально опасной необходимости выпрямлять табличный макет для умещения его в небольшой экран устройства и такую специфическую особенность, как сворачивание меню в один блок, с возможностью его развернуть. За счёт этого экономится место на экране, а работает это всё на основе обычных списков. Также, подобная практика разметки страниц, позволяет легко писать специальные файлы стилей для мобильных устройств, на основе единого макета.
Голосовой браузер правильно акцентирует каждый уровень заголовков, последовательно перечислит общие элементы списка, без необходимости продираться через каждую табличную строчку и ячейку макета, мешая и так непростому использованию сайтов людьми с ограниченными возможностями.
Создание версии для печати превращается либо в простое отключение стилей, либо в минимальное оформление документа, который уже и так готов для удобного чтения.
Поисковые машины оценят вашу работу. И речь идёт не только о весе ключевых слов в заголовке <h1>, вместо несуразности <td class="title"> и общем уменьшении мусорного кода на странице, но ещё и о всё более широко внедряемой поддержке микроформатов для более точного и подробного анализа ваших документов.

Использование языка в соответствии с его предназначением. Упомянутая выше концепция POSH (Plain Old Semantic HTML) основывается, прежде всего, на использовании встроенных возможностей языка. Прежде чем работать с HTML, неплохо было бы изучить его. К примеру, по этой статье: «Встроенная семантика в HTML» (Built in Semantics in HTML). Вполне вероятно, что после изучения всех возможностей HTML, вам больше не захочется называть вёрстку «дивной». Иначе говоря, использование вещей по их прямому назначению — это всегда наиболее оптимально.

Самодокументируемый код. При использовании второго уровня семантики в документе, а именно — именования элементов в соответствии с их содержимым или назначением, ваш код начинает звучать. Теперь это не просто набор бессмысленных классов вроде border4px или no-margin-right, а полноценный скелет вашего документа, который можно легко читать по внятно именованным ключевым элементам. Это не только упрощает разработку и поддержку сайтов, но ещё и является отличной основой для единого стиля вёрстки для целой команды, чтобы работа с кодом не превращалась в борьбу с кодом.

Новые смысловые уровни документа, удобная работа с ними. Речь, в данном случае, идёт о микроформатах, которые позволяют извлекать и интерпретировать максимально точно размеченную информацию из вашего документа, без использования сложных морфологических алгоритмов, всего лишь на основе формализованного синтаксиса. Мгновенный доступ к нужной информации средствами браузера, плагинов, веб-сервисов или поисковых машин — это уже сегодняшний день. Не опоздайте на уходящий поезд.

О «шмемантике»

Небольшая ремарка о понятии «семантика» относительно вёрстки. Это не попытка подвести серьёзную научную базу под саму вёрстку и технологии с ней связанные, и не игры во что-то высокое, светлое и элитарное. Семантическая вёрстка — это всего лишь набор идеологических установок и приёмов, которые помогут вам работать более уверенно и последовательно, создавая действительно качественную разметку. Если ваша задача просто «фигачить», вам сложно будет понять, о чём я, собственно, здесь рассказываю. По этой причине публикация «Семантика-шмемантика» (её архивная версия) не может вызвать какой-либо дискуссии — мы говорим о разных вещах, хоть и используем одинаковую терминологию.

Напоследок — серия публикаций по теме, обязательных для ознакомления:

Джон Оллсоп (John Allsopp) — «Semantics in HTML», «Built in Semantics in HTML»
Тантек Челик (Tantek Çelik) — «A Touch of Class», «The Importance of Being POSH»
Джесс Скиннер (Jesse Skinner) — «Who will read your Semantic HTML?»

Отличное продолжение первой части, сиквел, что называется, удался. Особенно порадовала последняя глава о шмемантике. Как раз такое определение для семантической верстки и я и хотел здесь увидеть.

Спасибо за интересный рассказ на такую актуальную тему.

По второму уровню замечу, опытные js'ники выступают против структурной разметки с использованием id в сторону class. Не менее опытные верстальщики соглашаются, но делают структуру с #header и #footer :)

Классная статья *THUMBS UP*

Не знаю может глупый вопрос, но задам) а можно где-нибудь получить полный список имен классов, используемых в hCard? достаточно много инфы просмотрел и не встречал приведенные здесь имена nickname, fn n :-[

Думаю в правила именования элементов стоит добавить информацию о том, какими могут быть имена (не начинаться с цифры, регистр имеет значение и т.д.). Не раз сталкивался с ситуацией, когда приходилось исправлять подобные названия: "icon[1]", "1-st", "2-nd" и т.д.

p.s. operator глючит в ff 2.0.0.13 - не видно некоторых надписей :-/

а можно где-нибудь получить полный список имен классов, используемых в hCard?

например, в вики, посвященной hCard

Или воспользоваться прекрасной шпаргалкой по микроформатам от Брайана Суда.

В примере с "головостиком" может стоило бы повесить класс photo на картинку?

В примере с "головостиком" может стоило бы повесить класс photo на картинку?

Думаю, что головастик, в данном случае, не имеет никакого портретного сходства с человеком, поэтому обозначить это как фото было бы странно.

Спасибо, очень славная статья. Полезным оказался блок о микроформатах: всегда ценен живой пример.

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

кто такой Айк? o_O

Айк, он же Иван Кузнецов

Очень хорошо написано, браво!

Обе публикации, как я понимаю, призывают верстальщиков:
а) научиться разделять разметку (html) от представления (CSS)
б) правильно воспринять парадигму разметки.

Статья, имхо, не стоит зря потраченного времени. Абсолютно, простите, ни о чем. Хотя народу видимо нравится (судя по комментам:)

Виктор, вот вы сами всё и сказали — статья писалась для людей, а не ради личного самолюбования. Чтобы отныне увереннее пользоваться этим термином, а при случае отсылать людей к этой публикации.

ps: если вы готовы к дискуссии — что бы вы хотели увидеть в статье на подобную тематику?

Аатличная статья! И, будете смеяться, но катастрофически вовремя. Теперь мне не нужно будет искать «правильные» определения к лекции, достаточно будет отсылать людей к этой публикации. %)

Вот ещё бы статью о подходах к именованию идентификаторов и классов в «промышленном масштабе» - и совсем бы наступил мир во всём мире.

а код который рисует гугль мепс это вот этот?
http://tech.bluesmoon.info/2006/01/of-microformats-and-geocoding.html

можно где-то посмотреть его живое применение? там какие-то не очень примеры даются

pepelsbey, у вас в HTML коде ошибка (с примером vCard), …
А статья интересная, Вам спасибо.

в HTML коде ошибка (с примером vCard)…

Спасибо, поправил

Было бы супер, если бы вы сделали одну простую страничку, к которой бы прицепили тот "несложный JavaScript-код" и продемонстрировали вживую появление кусочка карты с указателем на ней в указанной точке.

Ура, вот и долгожданные ссылки :)

"Если ваша задача просто «фигачить», вам сложно будет понять, о чём я, собственно, здесь рассказываю." - сохранил цитату, отлично)

Третья OperaMini несворачивает списки(
Может четвёртая сворачивает?

target="_blank" — плохо.

Вот теперь я совсем не понимаю, как мне верстать...
Все конечно правильно тут написано, но что мне делать, когда я получаю навороченный макет страницы, где дизайнер с заказчиком развернулись, насколько их фантазии хватило и чуточку более - страницы с меняющимся фоном, с открывающимися-закрывающимися в несколько этапов блоками, у которых к тому же закругленные края, и края эти должны быть прозрачными, потому что блоки могут попадать на разный по цвету фон. И блоки к тому же должны тянуться на неопределенную высоту и ширину... И прочая, и прочая, и прочая...
А тэгов в html для реализации всего этого просто нет.
Как в таких условиях сделать семантически правильную верстку? А верстку все равно делать надо.

Вот теперь я совсем не понимаю, как мне верстать...

Боюсь, что вы восприняли статью слишком буквально и не очень внимательно прочли предпоследний абзац «О шмемантике». Я призываю лишь к тому, чтобы вы думали, что вы пишете в документе.

Получили навороченный макет? Поймите из каких логических частей он состоит, создайте правильный и красивый документ, а дальше уже начинайте думать как это сверстать и, при необходимости, крутите дополнительные DIV'ы и SPAN'ы для того, чтобы реализовать несколько фонов для одного объекта или справиться с багами IE6.

Это не жёсткие правила, это методика.

Я призываю лишь к тому, чтобы вы думали, что вы пишете в документе.

Если бы я не думала об этом, я не читала бы таких статей. Я прочла предпоследний абзац и никогда не ставила задачи "просто фигачить". Я хочу понять для себя - как делать правильно, потому что не хочу краснеть за свою работу.

В любом случае, спасибо за статью.

jalex,

сделать закруглённые (полу-)прозрачные уголки Вам поможет формат PNG. Минус — отсутствие поддержки в IE6, который и так уже давно пора пристрелить.

От изменения фона страниц настоятельно уговорите заказчика отказаться. Причины логические.

Решение оставшихся задач должно быть проще :-). Далеко не всё решается тэгами, о чём было справедливо замечено в «шмемантике».

Вопрос по коду: пробелы в именах классов, это опечатка или фишка?

ps: капризы IE c прозрачностью в png можно обойти:
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

Ну, если вы не знаете, что такое пробелы в именах классов, то разбираться с PNG-24 в IE вам ещё рановато ;)

Я тут искал как изменить width у label и заметил что вы в этом блоге у комментариев решили эту проблему довольно неказистым способом (поставили текст у label за input-ами), это довольно неплохо смотрится у вас в блоге. Но все же... Как поставить ширину для этих лайблов? Да чтоб по кроссбраузернее.

Вадим, а можно ли вкладывать внутрь блоков с микроформатами свои блоки?
Как например тут вложен

<span class="vevent-title">открытие: </span>

<div class="vevent">
    <span class="vevent-title">открытие: </span>
    <abbr class="dtstart" title="20100510T1000">
       10 мая в 10:00, 2010 год.
    </abbr>
    <span class="vevent-title">закрытие: </span>
    <abbr class="dtend" title="20100513T2000">
        13 мая в 20:00, 2010 год.
    </abbr>
    <a class="url" href="yandex.ru">
        <span class="summary">название конференции</span>
    </a>
    <span class="location">Москва</span>
    <div class="description">описание конференции</div>
</div>

Главное, чтобы атомарные микроформаты вроде location содержали подходящий по смыслу текст. А в обёрточные элементы вроде vevent можно вкладывать что угодно.

Раньше никогда не задумывался и не знал о семантике. Теперь буду стараться делать все более "правильно"

жалко, что ссылка на «Семантика-шмемантика» уже битая :(

Иван, я обновил пост ссылкой на архивную версию статьи про «Шмемантику».

А я вот искал и не нашёл такого микроформата которые бы сделал пагинацию семантической. Неужели его в самом деле нет, рецепты есть, а пагинации нет? Это было бы так здорово, что бы браузеры понимали пагинацию, и можно было бы пролистывать страницы без мышки. А до ближайшего будущего хватило бы написать всего один js который навешивал горячие клавиши.

Денис, я боюсь, что вы не до конца поняли назначение микроформатов. Для оформления постраничной навигации вполне верно использовать нумерованный список <ol>, а дополнительные спецэффекты, как вы правильно заметили, навешивать при помощи JS.