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

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

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

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

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

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

Создание разделов документа с помощью вложенных <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> считаются валидными, если они представлены в контексте отдельной секции. Такой контекст создаётся секционными элементами:

• <article>
• <section>
• <aside>
• <nav>

Таким образом, <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