• Статья
Осмысленная разметка: POSH и не только

Эмили Льюис (Emily P. Lewis) | 21.06.10

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

По мере продвижения в процессе редактирования и переписывания я все больше интересовалась тем, как работает веб-сайт. Чуть-чуть поиска в Интернете, и я узнала о чем-то, называющемся HTML. В один роковой день я открыла «Блокнот» и ввела:

<h1>Это тест</h1>

Я сохранила текстовый файл с расширением .html, открыла его в Internet Explorer и была потрясена. Это была магия! Я могла публиковаться мгновенно! И мой мир изменился. Я бросила маркетинг, начала самостоятельно изучать HTML (а позднее и CSS) и начала новое приключение как веб-специалист.

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

Что печалит меня, так это то, что не у всех есть подобная тяга к хорошей разметке. Веб-сайты страдают от таких болезней, как суп из тегов, вложенные теги div (div-itis) и span-мания. И, честно говоря, я не понимаю, почему.

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

Однако большинство встреченных мною людей, работающих в веб-отрасли — действительно настоящие профессионалы. Они влюблены в свою работу и постоянно стремятся создавать замечательные веб-сайты и приложения. Так почему же так много из них забывает о силе хорошей разметки? И я пришла к выводу, что дело не только в ограничениях. Дело не в обращении с HTML как с приемным ребенком. Это даже не лень (хотя я допускаю, что иногда именно она является причиной).

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

Что такое семантическая разметка?

Семантическая разметка — это разметка, имеющая смысл, разметка, описывающая контент, который она содержит, а не то, как этот контент должен выглядеть. Это означает, что для макета не используются ни теги <font>, ни теги <b>, ни элементы <table>.

Вместо этого семантическая разметка стимулирует думать в первую очередь о контенте. Поэтому, если есть список, то следует использовать элемент списка, такой как <ul>. Если нужен абзац, следует использовать <p>, а не <div>. Если нужен заголовок, следует использовать элемент заголовка, такой как <h2>.

Напротив, если нужно выделить контент, не используйте <blockquote>, если выделяемый контент не является цитатой. Если нужно, чтобы контент выглядел большим и был выделен полужирным шрифтом, не используйте <h1>, если контент действительно не является основным заголовком страницы. Для подобных типов преставления лучше обратиться к CSS, а не к разметке.

Эта концепция семантической разметки — фундамент современных веб-стандартов, стимулирующих отделять контент от представления (CSS) и поведения (JavaScript). Фактически, семантическую разметку часто называют разметкой, «совместимой со стандартами». И, в соответствии с любовью компьютерщиков к сокращениям, семантическая разметка также называется POSH (Plain Old Semantic HTML, старый добрый семантический HTML).

Независимо от терминологии семантическая разметка всегда должна быть корректной. Это лишь значит, что разметка соответствует назначенному типу документа DOCTYPE. Независимо от выбранного вида разметки — HTML 4, XHMTL или даже HTML5 — написанная разметка не должна содержать ошибок и некорректных элементов и атрибутов.

Как узнать, правильна ли написанная разметка? Просто. Используйте Интернет-средство проверки W3C.

Преимущества семантической разметки

К этому моменту вы, возможно, уловили суть семантической разметки, но еще удивляетесь, почему она так важна.

Эффективность

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

Семантическая разметка также обеспечивает эффективность процесса разработки, что особенно полезно для командной работы. С помощью POSH создается общий словарь для разметки создаваемого веб-сайта. Разработчикам не нужно тратить дополнительное время на анализ того, какая разметка должна использоваться для различных типов контента. Абзац — это <p>. Упорядоченный список — это <ol> и так далее.

Далее, благодаря соблюдению этих стандартов и удалению ненужных тегов <div>, <span>и вложенных элементов <table> разметка становится более читаемой. А читаемость имеет огромное влияние на удобство поиска неполадок, отладку и сопровождение.

Доступность

Другим преимуществом семантической разметки является то, что она обеспечивает фундамент для доступного веб-сайта. Как я уже упоминала в своем руководстве по специальным возможностям и WAI-ARIA, технологии, поддерживающие доступность, такие как программы чтения с экрана осуществляют переходы по веб-сайтам в соответствии со структурой. Например, веб-сайт, в разметке которого элементы заголовков (<h1>-<h6>) используются для передачи иерархической структуры контента, предоставляет пользователям программ чтения с экрана возможность перехода по разделам иерархии.

И, конечно же, рекомендации WCAG 2.0 стимулируют использовать семантическую структуру не только для структуры страницы, но и для списков (<ul>, <ol>, <dl>), а также специальный текст, который требует выделения (<strong>, <blockquote>, <abbr>). Кроме того, в эти документах не рекомендуется использовать элементы <table> для любых других целей, кроме отображения табличных данных.

Ощущения пользователя

Страницы, разработанные в соответствии с POSH, обычно являются более легкими, чем их аналоги, представляющие собой суп из тегов. Это часто положительно влияет на время загрузки страниц и время отклика, которые, в свою очередь, улучшают ощущения пользователя. Помните, не у всех есть высокоскоростной доступ и не все используют самые последние и лучшие технологии. POSH позволяет создавать наименьший общий знаменатель, позволяя эффективно доставлять контент всем пользователям.

Оптимизация для поисковых машин?

Многие годы я рассказывала о преимуществах семантической разметки для органической оптимизации для поисковых машин (SEO, Search Engine Optimization). Я долго слушала истории о том, что поисковые машины спотыкаются на вложенных элементах <table>, что Google присваивает более высокий ранг контенту, содержащемуся в элементах заголовков, что обход экономной семантической разметки будет выполняться быстрее и эффективнее.

К сожалению, большинство доказательств в пользу этих историй основываются на отдельных наблюдениях. Я пыталась найти твердые факты, свидетельствующие, что правильная, семантическая разметка улучшает результаты работы поисковых машин. Фактически, компания Google даже утверждала, что использование CSS вместо элементов <table> для макета мало влияет на его алгоритм.

Несоответствие моих ощущений и действий поисковых машин связано с улучшением поисковых алгоритмов с течением времени. Вложенные элементы <table>, которые обычно создавали проблемы, например, для Google, больше не являются препятствием благодаря более сложному алгоритму.

Все так, но я лично подозреваю, что что-то происходит с поисковыми машинами и семантической разметкой. Например, компания Google рекомендовала разумно использовать элемент <h1>, чтобы избежать возможных неудобств и продолжает рекомендовать надлежащим образом использовать теги заголовков. Google также поощряет веб-мастеров писать более экономную разметку, чтобы повысить производительность. По-моему, эти рекомендации означают, что алгоритм Google действительно обращает внимание на разметку и «раздутость» до некоторой степени.

Написание семантической разметки

Теперь, когда вам известны смысл и преимущества семантической разметки, давайте поговорим о том, как действительно перейти к ее использованию. Во-первых, я должна признать, что от новичков в ее использовании семантическая разметка потребует чуть большей работы и изменения образа мышления. Если при разработке веб-сайтов вы использовали теги <table> для управления макетом или элементы <div> для каждой отдельной части блочного контента, переход на POSH покажется странным и, возможно, даже разочаровывающим.

И поверьте, я чувствую вашу боль. Я была в таком же положении. Когда я начала изучать HTML, у меня не было ни малейшего представления о том, что такое веб-стандарты, не говоря уже о семантической разметке. Мои веб-сайты очень точно попадали под определение «суп из тегов». Но как только я поняла, что существуют стандарты для HTML, предлагающие множество преимуществ, о которых я даже никогда не подозревала, я больше не смогла, в хорошем смысле, продолжать разрабатывать веб-сайты, так как раньше.

Если вы пришли к такому же выводу, вот с чего я рекомендую начать:

  1. Добейтесь базового понимания HTML-элементов, а также их структурного и семантического значения, чтобы правильно их использовать. Разберитесь в разнице между <ul> и <ol>. Узнайте, для чего в действительности следует использовать элемент <table>. Можно обратиться к спецификациям, но если вы похожи на меня, то вам может показаться, что они написаны очень запутанным языком. Я предлагаю обратиться к статьям Встроенная семантика в HTML и Семантическая классификация HTML-элементов.
  2. Прежде чем начинать писать разметку, разберитесь с контентом. Используются ли списки последовательных элементов? Есть ли цитаты? Используются ли заголовки и подзаголовки? Начав с анализа контента, вы уже настроитесь на семантический образ мыслей.
  3. Когда приходит время разметки, сфокусируйтесь только на разметке своего контента и структуре. Запретите себе писать разметку, связанную с представлением. Даже если, например, кажется, что для фонового изображения нужен контейнер <div>, пока не пишите эту разметку. Вместо этого используйте для описания контента только HTML. Вы можете обнаружить, что тег <ul>, примененный для навигации, обеспечивает необходимую структуру для CSS без добавления несемантического <div>.
  4. Закончив разметку контента, потратьте время на ее проверку. Это поможет гарантировать правильность разметки до того, как вы начнете добавлять что-то еще для поддержки представления или поведения.
  5. Когда приходит пора добавлять CSS, сделайте все возможное, чтобы применить стили к разметке, уже написанной для контента. Найдите время, чтобы понять, нужно ли добавление <div> или <span> для целей представления. Действительно ли это необходимо? Нет ли уже элемента, который может служить зацепкой для стиля CSS?
  6. Написав всю разметку, включая продуманно добавленную для целей представления или поведения, повторите проверку.

Конечно, эта последовательность действий описывает только мой процесс создания разметки. Возможно, для вас (и вашей команды) лучше подойдет другой рабочий процесс. Суть в том, чтобы выделить время на продумывание решений. И, поверьте мне, чем больше вы будете думать, тем проще и быстрее придет успех в написании семантической разметки. Но этот подход действительно накладывает определенные обязательства и действительно требует определенного времени. Но стоит втянуться, и, я подозреваю, процесс станет менее пугающим.

Несколько примеров

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

Главная Продукты Услуги О компании

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

<div>
 
<p><a href="/">Главная</a></p>
 
<p><a href="/Products/">Продукты</a></p>
 
<p><a href="/Services/">Услуги</a></p>
 
<p><a href="/About/">О компании</a></p>
 
</div>

Но давайте проанализируем этот контент. Является ли на деле абзацем каждая из этих ссылок? Для какой цели используется контейнер <div>?

Мне кажется, что эти навигационные ссылки фактически являются группой связанных элементов контента. Это делает их идеальными кандидатами для элемента неупорядоченного списка <ul>. В таком случае POSH-подход к этим навигационным ссылкам выглядел бы так:

<ul>
 
<li><a href="/">Главная</a></li>
 
<li><a href="/Products/">Продукты</a></li>
 
<li><a href="/Services/">Услуги</a></li>
 
<li><a href="/About/">О компании</a></li>
 
</ul>

Теперь рассмотрим другой пример контента, на этот раз сведения о контактах для веб-сайта:

Компания АБВ

Главная улица 123

Город, ОБЛ 123456

info@abv.ru 123-456-7890

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

<div>ABC Company</div>
<div>123 Main Street<br />Albuquerque, NM 87106</div>
<div><a href="mailto:info@abc.com">info@abc.com</a></div>
<div>888-555-4567</div>

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

<dl>
 
    <dt>Компания АБВ</dt>
 
    <dd>
 
<ul>
 
<li>Главная улица 123</li>
 
<li>Город, <abbr title="Область">ОБЛ</abbr> 123456</li>
 
        </ul>
 
    </dd>
 
    <dd><a href="mailto:info@abv.ru">info@abv.ru</a></dd>
 
<dd>123-456-7890</dd>
 
</dl>

Семантическая разметка может быть субъективной

Одним из самых проблемных моментов в написании семантической разметки оказывается выбор «правильных» элементов для использования. Для некоторого контента сразу же очевидно, что нужно использовать <p> или <h1>. В других случаях возможно несколько семантических подходов.

Рассмотрим вышеприведенный пример для компании АБВ. В моей семантической разметке я воспользовалась списком определений (<dl>). Некоторые могут (упорно) спорить с этим использованием <dl>, так как они следуют принципу, по которому списки определений нужно использовать только для контента, отражающего термины и определения.

Я, с другой стороны, придерживаюсь мнения, что списки определений могут также использоваться для элементов контента, непосредственно связанных друг с другом, где контент <dd> связан с контентом <dt>. В случае сведений о контактах компании АБВ я считаю сведения об адресе, электронной почте и телефоне (содержащиеся в тегах <dd>) напрямую связанными с именем компании (заключенному в теги <dt>).

Могут найтись и несогласные с моим использованием тега <dl>. Обратите внимание, я использовала <ul> для сведений об адресе. По моему мнению, эти сведения являются группой связанных элементов контента.

Чтобы показать субъективную природу семантической разметки, я могла бы применить к этим сведениям о контактах другие подходы, например:

<h3>Компания АБВ</h3>
 
<ul>
 
<li>Главная улица 123</li>
 
<li>Город, <abbr title="Область">ОБЛ</abbr> 123456</li>
 
</ul>
 
<dl>
 
    <dt>Электронная почта:</dt>
 
    <dd><a href="mailto:info@abv.ru">info@abv.ru</a></dd>
 
    <dt>Телефон:</dt>
 
<dd>123-456-7890</dd>
 
</dl>

Итак, в действительности не существует «правильного» семантического подхода ко всему контенту (хотя ряд пуристов от семантики могут с этим не согласиться). И снова, я призываю вас сфокусироваться на том, чтоб думать, создавая разметку. Понимать причины выбора одних элементов, а не других, и быть открытым к изучению других подходов. По мере роста ваших знаний представления о правильной семантике могут меняться.

Не забудьте о HTML5

Так как фокусом этой статьи является семантическая разметка, я должна немного поговорить и о HTML5. Хотя стандарт HTML5 все еще является черновиком, в нем введен ряд новых семантических элементов, которые могут уменьшить или устранить необходимость использования для структуры тегов <div>:

  • <section> (раздел) представляет часть документа или приложения, в которой сгруппирован тематический контент. <section> обычно содержит <header> (верхний колонтитул) и может также содержать <footer> (нижний колонтитул).
  • <header> обычно содержит заголовок или группу заголовков страницы и/или теги <section>, хотя он также может содержать и другие вспомогательные данные, например навигационные ссылки, эмблемы и т. д.
  • <footer> используется для контента со сведениями о разделе <section>, например, кто является его автором, ссылки на связанные документы, сведения об авторских правах и т. д.
  • <nav> (переход) используется для основных навигационных ссылок на странице.
  • <article> (статья) используется для самодостаточного контента и может использоваться независимо от страницы в целом, например для записи в блоге.
  • <aside> (в стороне) указывает на часть страницы, связанную с окружающим ее контентом, но отделенную от этого контента, например на боковую колонку.

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

За рамками структуры

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

Значения классов и идентификаторов

Как я писала в статье Научитесь работать в группе CSS, соглашения о семантических именах для значений class и id могут обеспечить значимость контекста и осмысленность CSS. Рассмотрим два объявления стилей:

.f23 {    
    background: #fff;    
    border: 1px solid #ff0;    
    font-weight: bold;    
    padding: 10px; 
}
.alert {    
    background: #fff;    
    border: 1px solid #ff0;    
    font-weight: bold;    
    padding: 10px;
}

Пары «значение-свойство» в этих примерах идентичны, но какой из них содержит больше смысла? Я надеюсь, что больший смысл второго объявления очевиден, благодаря использованию осмысленного имени класса. «Alert» (предупреждение) намного более информативно, чем «f23», а дополнительный контекст может упростить для разработчика (и всех, кто будет работать с этой таблицей CSS) понимание, на какой контент влияет объявление стиля.

Помимо контекста семантические (а не описывающие представление) значения class и idмогут помочь упростить сопровождение и дальнейшую разработку. Рассмотрим веб-сайт с контентом боковой колонки с id="rightSidebar". Это имя кажется семантическим, но оно одновременно является и описывающим представление. Поэтому, если при переработке дизайна веб-сайта контент этой боковой колонки будет перемещен в новое визуальное положение имя «rightSidebar» (правая боковая колонка) становится бессмысленным.

Это означает, что понадобится изменить не только значение в CSS, но и все ссылки на этот идентификатор в разметке. Вместо этого, чисто семантическое значение, например id="relatedContent" (связанный контент) или даже просто id="sidebar" (боковая панель), в будущем предоставит большую гибкость.

Значение для машин

Помимо упрощения сопровождения и дополнительной информации для разработчика, семантические значения атрибутов также сообщают машинам (пользовательские агенты, поисковые машины, браузеры, приложения и т. д.) важные сведения о контенте.

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

Рассмотрим вышеприведенный пример компании АБВ. Мы с вами, будучи людьми, мгновенно понимаем смысл этого контента: сведения о названии, адресе, телефоне и электронной почте. Но машины не обладают таким умением. Для машин этот контент ничем не отличается от остального контента страницы.

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

Другим примером использования семантических значений атрибутов, чтобы сделать контент машинно-читаемым, является WAI-ARIA. Как я упоминала в своей статье Руководство по специальным возможностям в Интернете и WAI-ARIA, элементам разметки можно назначить роли, помогающие специальным технологиям, поддерживающим доступность, понимать структуру документа, понимать действия мини-приложений и взаимодействовать с мини-приложениями.

Дальнейшее обсуждение машинно-читаемых атрибутов, используемых в микроформатах и ARIA, выходит за рамки этой статьи. Но эти атрибуты являются частью обсуждения семантической разметки, и я призываю вас ближе познакомиться с ними.

О микроформатах можно прочитать в серии из 8 записей в моем блоге Реализация семантики с помощью микроформатов. Об ARIA можно прочитать в моем руководстве на сайте Script Junkie.

Говоря о пуристах…

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

Когда я впервые начала работать с веб-стандартами, я гордо именовала себя «сторонницей стандартизации» и в штыки встречала любую разметку, которая казалась мне недостаточно семантической, не следовала стандартам и/или была неправильной. Я приняла точку зрения пуристов, и, если быть честной, для меня было важнее чувствовать важной и праведной, чем разбираться в том, что действительно происходит в Интернете.

А действительность состоит в том, что в современном Интернете используется разметка, не являющаяся семантической. Пока поддержка CSS по-разному реализуется в разных браузерах, есть необходимость добавлять теги <div> и <span> для достижения определенных целей. Пока используются системы, ограничивающие возможность дизайнеров и разработчиков изменить разметку, будут использоваться и несемантические элементы, и даже неправильная разметка. И не забудем то, что говорилось о субъективности… для любого подхода к POSH найдутся люди, которые будут возражать.

Даже в том, что касается проверки, есть исключения. Я утверждала в начале этой статьи, что семантическая разметка всегда должна быть правильной. Но если использовать роли WAI-ARIA (role), чтобы добавить смысл и помочь пользователям специальных технологий, поддерживающих доступность, созданная разметка не пройдет проверку, так как соответствующие атрибуты не определены в документах DTD для HTML или XHTML. Существуют способы обхода, но возникает вопрос, что важнее — несколько ошибок проверки или обеспечение большей доступности веб-сайтов и приложений?

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

Что касается меня, я продолжаю считать себя сторонницей стандартов. Но сегодня я, скорее, ищу компромисс, а не просто стремлюсь «быть правильной». Я ставлю своей целью семантическую разметку. Я ставлю своей целью экономную разметку. Я ставлю своей целью корректность и отсутствие ошибок при проверках. Но я также использую несемантические теги <div> и <span>. Я могу использовать атрибуты для чтения машинами, что приведет к неправильной разметке. Я даже использую свойства CSS, которые не пройдут проверку. И я не стесняюсь этого. Это не делает меня плохим разработчиком. Это делает меня реалистичным разработчиком… одним из тех, кто знает правила и может разумно решать, какие исключения важны для моих веб-сайтов и моей аудитории.

Дополнительные материалы

Этот экскурс в семантическую разметку, соответствующую стандартам, является только частью большой дискуссии. Изучение следующих ресурсов может привести к улучшению понимания этого вопроса: