Структурная разметка с HTML5. Часть 1.

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

Почти каждая веб страница при разметке разбивается на структурные блоки (секции). Такими структурными секциями являются шапка (header), подвал (footer), меню, блок контента и т.д. До прихода HTML5 веб разработчики для обозначения подобных блоков использовали нейтральный тег <div> добавляя ему смысловые имена классов или id (к примеру, <div id=»header»>). К этому все привыкли, но т.к. <div> не имеет смысловой нагрузки, разобрать и понять код такой довольно сложно. Например, с такими проблемами сталкиваются поисковые роботы. Им не помешала бы своего рода понятная карта.

Чтобы в разметке появилась подобная «карта» в HTML5 были добавлены структурные теги: section, nav, article, header, footer, aside. Это только основные теги, на них пока и остановимся.

Так какие же выгоды нам сулят новые теги

Поисковая оптимизация

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

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

Как конкретно поисковики будут обрабатывать такую разметку и какое значение ей придают пока покрыто туманом неизвестности (по крайней мере для меня).

Доступность

Посмотрим на станицу интернет магазина

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

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

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

Вникаем в назначение структурных тегов

В HTML 4 никаких проблем с разметкой блоков страницы не было: был только <div>. В HTML5 вначале можно потеряться от разнообразия тегов, которые пришли ему на смену. И не стоит заблуждаться, что там все предельно понятно: мол <header> — это шапка сайта, а <aside> — привычный sidebar. Все гораздо запутанней.

section

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

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

<article>
	<h1>Заголовок статьи</h1>
	<p>Вступительное слово...</p>
		<section>
			<h1>Заголовок подраздела статьи</h1>
			<p>Контент подраздела</p>
		</section>
		<section>
			<h1>Заголовок второго подраздела статьи</h1>
			<p>Контент подраздела</p>
		</section>
</article>

Что это: несколько <h1>?! Да, тебе не показалось и это не ошибка. Об этом будет отдельный материал.

Может показаться, что <section> — это современная замена <div>. Но это не так. Вот несколько правил, которые помогут в большинстве случаев определить, когда не следует применять <section>:

• если требуется контейнер только для оформления или привязки скриптов (для этого применяй <div>);
• если по смыслу больше подходит <article>, <aside>, <nav>, <header>, <footer>;
• если блок в начале не имеет естественного заголовка.

article

<article> — это частный случай <section>.

Определяет независимую часть на странице, которая состоит из взаимосвязанных компонентов.

В данной трактовке спецификации самое трудное — это понять что значит «независимая часть». Можно предположить, что независимая — это такая часть, которая имела бы смысл, даже если бы была полностью «вырвана» из окружения. Например, взяли блок со страницы одного сайта, поместили на другой и он там тоже понятен. Под такую трактовку попадают статьи, блоки с курсами валют или баннеры. Верность данной трактовки подтверждает следующее предложение из спецификации:

Это может быть пост на форуме или журнале, статья, сгенерированный контент пользователем, интерактивный виджет…

Все равно спецификация довольно смутно глаголит и приходится гадать, как именно и для чего в верстке использовать <article>. А по вопросу в чем же отличие от <section> вообще развелось много дискуссий и споров. Например, у меня сразу возникли следующие вопросы:

• что использовать для основного контейнера сайта: <article> (ведь сам по себе сайт вроде как независим), <section> (ведь все содержимое взаимосвязано — относится к одной веб странице) или <div> (ведь основной контейнер по сути нужен только чтобы ограничить размеры веб страницы)?
• шапку сайта обрамлять просто <header> или нужен <section>?
• основной контент обрамлять <article> или же сначала обрамить <section>, а внутри уже <article>?

Это напоминает ситуацию с путаницей между <abbr> и <acronim>. Этот момент разрулили устранением последнего и стало все отлично. Многие веб разработчики негодуют: зачем было усложнять жизнь, если все шло к упрощению и устранению вот таких вот ситуаций?. Почему просто не оставить только <section>?

Думаю это было бы неправильно. По крайне мере, если оставить <section> как есть. Ведь тогда разметка на <section> была бы ничем не лучше хорошо всем знакомой на <div>. Как тогда было бы определить, где на сайте основной контент?

Среди всех этих дискуссий для себя нашел несколько правил, как определить когда же следует использовать <article>:

• если содержимое <article> имело бы смысл в канале чтения пользователя (основной фактор);
• если по логике подходит использование атрибута pubdate (дата публикации) или cite (вспомогательный фактор);
• когда содержимое блока полностью независимо от остального (основной фактор, но подвергающийся сомнению*).

* — если выделять все независимые блоки в <article>, тогда под эту категорию попадают различные виджеты и баннеры, которые не являются основным содержимым страницы и мало кто из пользователей хотел бы это увидеть у себя в feed reader. В добавок к этому вообще становится непонятно как голосовые браузеры и поисковики смогут отличить основной контент, от вспомогательного.

Может некоторую ясность внесет <aside>?

aside

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

Упоминание sidebar в спецификации вводит определенную путаницу: многие себе сразу представляют боковую панель. Но тут имеется в виду полиграфический sidebar, куда выносятся пояснения и сноски к основному содержанию. На сайтах же в боковых панелях содержится что угодно: навигация, реклама, рейтинги — контент, который не имеет прямого, а зачастую и косвенного отношения к основному содержимого страницы. Более того, <aside> допускается использовать только внутри <article>.

Такая трактовка вызвала негодование сообщества разработчиков и в спецификацию были внесены изменения, а точнее добавлено следующее:

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

Вот только не знаю, лучше ли теперь стало для понимания логической разметки в целом. Продолжу «копание» в следующей части.

Заметка

Может возникнуть резонный вопрос: почему нет примеров? Ответ: чтобы в качестве примера разобрать реальную страницу нужно сначала ознакомится с остальными структурными тегами (nav, header, footer).

P.S.

Так как спецификация еще в работе, материал со временем может быть поправлен и/или дополнен.

По теме

• Структурная разметка с HTML5. Часть 2.

Материалы

• HTML5 (including next generation additions still in development)
• <section> is not just a «semantic <div>»
• HTML5 structure — div, section & article
• Aside Revisited
• The article element
• Article of doubt