Frontender Magazine

Разделы документа в HTML 5.1

Это перевод статьи «Document Outlines in HTML 5.1», написанной Ире Адеринокун и опубликованной на bitsofco.de. Оригинальную статью можно прочитать здесь.

В одной из моих прошлых статей я объясняла важность правильного разбиения страницы на разделы.

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

На прошлой неделе официально был принят стандарт HTML 5.1. В нём есть определённое количество интересных изменений, два из которых относятся к способам создания разделов документа.

Создание разделов документа с помощью вложенных <section>

В HTML 5.0 был представлен новый способ создания разделов документа: <section> с заголовком первого уровня создавал новый раздел, вложенный в него такой же <section> с таким же заголовком первого уровня создавал подраздел и так далее.

Пример разметки (этот способ создания разделов устарел):

<section>  
    <h1>Heading Level One</h1>

    <section>
        <h1>Heading Level Two</h1>
    </section>

    <section>
        <h1>Heading Level Two</h1>

        <section>
            <h1>Heading Level Three</h1>
        </section>
    </section>

</section>

Такая разметка определяла следующую структуру документа:

1. Заголовок первого уровня
    1. Заголовок второго уровня
    2. Заголовок второго уровня
        1. Заголовок третьего уровня

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

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

<section>  
<h1>Heading Level One</h1>

    <section>
        <h2>Heading Level Two</h2>
    </section>

    <section>
        <h2>Heading Level Two</h2>

        <section>
            <h3>Heading Level Three</h3>
        </section>
    </section>

</section>

Вложенные <header> и <footer>

В HTML 5.0 <header> нельзя было вложить в другой <header>, как и <footer> нельзя было вложить в другой <footer>.

В HTML 5.1 это было изменено. Теперь вложенные <header> и <footer> считаются валидными, если они представлены в контексте отдельной секции. Такой контекст создаётся секционными элементами:

Таким образом, <header> и <footer> всегда должны ассоциироваться с уникальным секционным элементом вроде <section>, а не с родительским <header> или <footer>. Например, элемент <article> может иметь <header>, в котором есть несколько <section> с информацией о статье:

<article>  
  <header>
    <h1>Creating a Document Outline in HTML 5.1</h1>
    <section>
      <header>
        <h2>The Author</h2>
      </header>
      <p>Ire Aderinokun</p>
      <address>Lorem ipsum dolor sit amet</address>
    </section>
    <section>
      <header>
        <h2>The Publication</h2>
      </header>
      <p>bitsofcode</p>
      <address>Lorem ipsum dolor sit amet</address>
    </section>
  </header>
  <h2>Introduction</h2>
  <p>Lorem ipsum dolor sit amet</p>
</article>

Эта разметка определяет такую структуру:

1. Creating a Document Outline in HTML 5.1  
    1. The Author
    2. The Publication
    3. Introduction

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Ire Aderinokun
Автор:
Ire Aderinokun
Сaйт:
https://bitsofco.de/
Twitter:
@ireaderinokun
GitHub:
ireade
Андрей Романов
Переводчик:
Андрей Романов
Сaйт:
http://andrew-r.ru/
GitHub:
andrew--r
ВКонтакте:
http://vk.com/andrew_r

Комментарии (14 комментариев, если быть точным)

Автар пользователя
PereplutCW

Всё стало логичнее, по-моему...

Автар пользователя
SilentImp

@PereplutCW Это если не думать о том, что основная масса блоков — переносимые виджеты. Ты верстаешь виджет. Вставляешь его в одно место. Потом в другое … и обнаруживаешь, что уровни уже не совпадают. Мне кажется h1h5 должны значить просто h. Уровень должен определяться браузером автоматически.

Автар пользователя
Hydrock

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

Автар пользователя
login2030

Все довольно логично. И если стили блока не привязывать к тегу, то все довольно гибко получается. Заменил h1 на h2 и нет проблем. Если есть проблемы со сменой тега, то наверное стоит задуматься над тем, как ты пишешь стили.

Автар пользователя
dudd1ts

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

Автар пользователя
login2030

Возможно. Но ты ведь не бездумно вставляешь блок, он несет какой-то смысл в себе.

Автар пользователя
personafour

@Hydrock, не понял в каких случаях "большое web-приложение" нуждается в строгой семантике? Я понимаю когда это требуется для лэндингов, новостных порталов и прочих интернет-магазинов. Но в действительно серьёзных веб-приложениях уже все давно положили болт на семантику и педалят всё чуть ли не на дивах одних. Я не утверждаю, что это хорошо и правильно, скорее наоборот. Но на моей памяти мало кто обычно заморачивается семантически верной расстановкой заголовков, ограничиваясь только CSS-разметкой.

Автар пользователя
dudd1ts

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

Автар пользователя
verstoff
  • к silentimp и dudd1ts Вложенность должна определятся автоматически
Автар пользователя
SilentImp

@personafour Во-первых, семантика нужна, в частности, для людей. Это важно для того что бы упростить поддержку проекта, введение новых людей в команду. «Дивная» верстка не способствует упрощению понимания кода. Во-вторых, если это веб-приложение, которое должно индексироваться поисковыми машинами, с которым должны взаимодействовать роботы, семантика важна. И обычно это так. В-третьих, семантика нужна для обеспечения доступности проекта для людей с ограниченными возможностями. Она правда играет роль. А люди с ограниченными возможностями это тоже покупатели, стоит оценивать какую выгоду они могут принести проекту.

Кстати, в работе я вижу «дивную» верстку не так уж часто. Так что не могу согласиться с тобой по поводу того что это норма.

Автар пользователя
MaxWal

Большие проекты, маленькие проекты... господа, что за меряние членами? От размера не меняется суть. Мне кажется, в вопросе семантики важно знать меру. Противников семантической разметки может и меньше, чем сторонников, но их аргументы достаточно логичные и с ними сложно не согласиться: не все проекты похожи на библиотечный каталог, который легко можно разметить артиклами и секшинами. Я для себя нашел такой выход: уверен, что тут уместен семантический тег - используй его, не уверен - пиши див, это НЕ запрещено. Этот выбор - это твое право как верстальщика, главное, чтобы свой выбор ты мог обосновать.

Автар пользователя
PretorDH

SilentImp: Нужно чётко разделять, где ещё секционный раздел, а где виджет. Шаблон шапки разделов/подразделов, это не виджет!!! У переносимого виджета не может быть <h...> по определению - он не может быть частью индексируемого контента. Проектируйте верстку правильно.

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

Автар пользователя
iamstarkov

апдейт из 2017: ни один из браузеров не реализовал аутлайн заголовков, поэтому этот раздел спеки бесполезен

Автар пользователя
ShilGen

плюс надо не забывать span для shema.org