HTML5 секционные элементы, заголовки и структура документа.

Перевод статьи:  HTML5 sectioning elements, headings, and document outlines.
Автор:  Roger Johansson.

Одна из тем, к рассмотрению которой я возвращался уже несколько раз – это использование заголовков с целью создания корректной структуры HTML документа. В статье «Влияние заголовков на структуру документа» вы можете ознакомиться с моими рассуждениями на эту тему.

Недавно я решил более детально изучить HTML5 подход к созданию структуры документа. И, честно говоря, не уверен, что мне удалось полностью разобраться в спецификации, но если у меня все-таки получилось, то я считаю, что новый алгоритм построения структуры очень запутан и требует от разработчиков максимум внимания при использовании секционных элементов (таких как <article>, <section>, <nav> и <aside>), если в результате необходимо получить согласованную, корректную структуру документа, не содержащую неразмеченные области.

Структура, предусмотренная HTML 4.01 стандартом.

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

<body>
<div id="header">Site title etc.</div>
<div id="nav">
<ul>
<li><a href="/">Nav item</a></li>
</ul>
</div>
<div id="main">
<h1>Article title</h1>
<p>Article content.</p>
<h2>Article sub-heading</h2>
<p>More content.</p>
<h3>Article sub-sub-heading</h3>
<p>More content.</p>
</div>
<div id="content-secondary">
<h2>Sidebar heading</h2>
<h3>Sidebar sub-heading</h3>
</div>
<div id="footer">
<h2>Footer heading</h2>
<p>Footer content.</p>
</div>
</body>

В результате такой разметки получаем следующую структуру документа (для просмотра структур веб-документов вы можете воспользоваться соответствующим расширением для разработчиков):

1.Article title
1.Article sub-heading
1.Article sub-sub-heading
2.Sidebar heading
1.Sidebar sub-heading
3.Footer heading

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

HTML5 структура документа.

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

<body>
<header>
Site title etc.
<nav>
<ul>
<li><a href="/">Nav item</a></li>
</ul>
</nav>
</header>
<article id="main">
<h1>Article title</h1>
<p>Article content.</p>
<h2>Article sub-heading</h2>
<p>More content.</p>
<h3>Article sub-sub-heading</h3>
<p>More content.</p>
</article>
<aside>
<h2>Sidebar heading</h2>
<h3>Sidebar sub-heading</h3>
</aside>
<footer>
<h2>Footer heading</h2>
<p>Footer content.</p>
</footer>
</body>

Для обеспечения обратной совместимости я не стал менять все заголовки документа на <h1> элементы, как это рекомендуется делать в HTML5 спецификации, а оставил прежние уровни для всех заголовков (тем более, что в нашем случае тотальная замена заголовков на <h1> ни как не повлияет на структуру документа HTML5 стандарта). В результате мы получим структуру совершенно идентичную той, которая была в предыдущем HTML 4.01 примере. Именно ее и формирует браузер, не использующий новый алгоритм HTML5 стандарта. Но в том случае, если вы используете инструмент, подобный HTML5 outliner, который как раз таки и применяет вышеупомянутый алгоритм, то в результате вы увидите следующую структуру:

1.Footer heading
1.Untitled NAV
2.Article title
1.Article sub-heading
1.Article sub-sub-heading
3.Sidebar heading
1.Sidebar sub-heading

Что вы скажите на этот раз? Как же получилось так, что находящийся в элементе <footer> заголовок определен как самый важный на странице? И почему секция <nav> в структуре документа получила статус Untitled (безымянной)?

Для начала давайте разберемся с подвалом. Элемент <footer> не делит контент документа на секции (разделы), то есть с его помощью невозможно создать новую секцию. По этой причине, присутствующий в примере заголовок <h2>Footer heading</h2> является единственным в контексте элемента <body>. А учитывая то, что <body> создает корневую секцию, то алгоритм построения структуры документа присваивает этому заголовку высший уровень, несмотря на то, что он является последним заголовком в документе и реализован с использованием тега <h2>.

Так какой же выход из создавшейся ситуации? Мы можем «изолировать» находящийся в подвале заголовок при помощи секционного элемента, и после этого он уже не будет интерпретироваться как заголовок документа в целом:

<footer>
<section>
<h2>Footer heading</h2>
<p>Footer content.</p>
</section>
</footer>

Такой способ решения проблемы можно расценивать как некий хак, и с его помощью мы действительно заставляем интересующий нас заголовок занять правильное место в структуре документа. Но теперь возникает другая проблема – элемент <body> и документ как таковой остался без заголовка, и его структура выглядит вот так:

1.Untitled BODY
1.Untitled NAV
2.Article title
1.Article sub-heading
1.Article sub-sub-heading
3.Sidebar heading
1.Sidebar sub-heading
4.Footer heading

В результате у нас появилось два безымянных раздела. То, что касается элемента <nav>, то он отображается без названия, так как представляет собой секционный элемент и алгоритм построения структуры документа просто создает для него новый раздел и соответствующий ему пункт в структуре документа. А поскольку в <nav> элементе отсутствует заголовок, то он отображается как безымянный навигационный раздел Untitled NAV.

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

<nav>
<h2>Main navigation</h2>
<ul>
<li><a href="/">Nav item</a></li>
</ul>
</nav>

Как быть с Untitled BODY?

Для того, чтобы не оставить сам документ, то есть его корневой элемент <body> безымянным разделом структуры, необходимо установить заголовок, который не будет относиться ни к одному секционному элементу. В этом случае мы тоже сталкиваемся с проблемой, а именно – это не позволяет нам заключить само содержание страницы в рамки элемента <article> и в тоже время, созданный нами заголовок будет интерпретироваться как заголовок всего документа, то есть наивысшего уровня, а не только как заголовок блока контента, что не всегда допустимо.

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

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

Не используйте секционные элементы.

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

Повторно указывать заголовок статьи за рамками всех секционных элементов.

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

Установить название сайта в качестве заголовка документа высшего уровня.

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

Не используйте элементы <article> в одностатейных документах.

А как насчет того, чтобы всё-таки применять секционные элементы, но именно в одностатейных документах не заключать их содержание в рамки элемента <article>, что приведет к тому, что заголовки самих публикаций будут одновременно представлять корневой элемент документа <body>. Что-то вроде этого:

<body>
<header>
Site title etc.
<nav>
<h2>Main navigation</h2>
<ul>
<li><a href="/">Nav item</a></li>
</ul>
</nav>
</header>
<div id="main">
<h1>Article title</h1>
<p>Article content.</p>
<h2>Article sub-heading</h2>
<p>More content.</p>
<h3>Article sub-sub-heading</h3>
<p>More content.</p>
</div>
<aside>
<h2>Sidebar heading</h2>
<h3>Sidebar sub-heading</h3>
</aside>
<footer>
<h2>Footer heading</h2>
<p>Footer content.</p>
</footer>
</body>

В результате структура будет выглядеть так:

1.Article title
1.Main navigation
2.Article sub-heading
1.Article sub-sub-heading
3.Sidebar heading
1.Sidebar sub-heading
4.Footer heading

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

Другой путь решения этой проблемы – использование имени сайта в качестве заголовка высшего уровня <h1> документа. Тогда в элементе <header> необходимо сделать следующие изменения:

<header>
<h1>Site title etc.</h1>
<nav>
<h2>Main navigation</h2>
<ul>
<li><a href="/">Nav item</a></li>
</ul>
</nav>
</header>

Которые приведут к такой структуре:

1.Site title etc.
1.Main navigation
2.Article title
1.Article sub-heading
1.Article sub-sub-heading
2.Sidebar heading
1.Sidebar sub-heading
3.Footer heading

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

Я полагаю, что вы тоже запутались.

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *