Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Важно: В настоящее время нет известных реализаций алгоритма построения структуры документа в графических браузерах или пользовательских приложениях, использующих реабилитационные технологии, хотя такой алгоритм внедрен в другие приложения, например, в средствах проверки соответствия спецификации. Поэтому алгоритм построения структуры нельзя использовать для передачи структуры документа пользователям. Авторы рекомендуют использовать для этой цели степень важности заголовков (h1-h6).

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

Структура документа в HTML 4

Структура документа, т. е. семантическая структура контента, заключенного в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом (<div>) с включенными в него элементами заголовка (<h1>, <h2>, <h3>, <h4>, <h5> или <h6>), содержащими его название. Структура документа определяется отношениями между этими элементами.

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

<div class="section" id="forest-elephants" >
  <h1>Лесные слоны</h1>
  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
    ...продолжение данного раздела...
  <div class="subsection" id="forest-habitat" >
    <h2>Среда обитания</h2>
    <p>Лесные слоны живут не на деревьях, а под ними.
     ...продолжение данного подраздела...
  </div>
</div>

обеспечивает следующую структуру:

1. Лесные слоны
   1.1 Среда обитания

Для задания нового раздела не обязательно использовать элементы <div>. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

<h1>Лесные слоны</h1>
 <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
    ...продолжение данного раздела...
  <h2>Среда обитания</h2>
  <p>Лесные слоны живут не на деревьях, а под ними. 
    ...продолжение данного подраздела...
  <h2>Рацион</h2>
<h1>Монгольская песчанка</h1>

обеспечивает следующую структуру:

1. Лесные слоны
   1.1 Среда обитания
   1.2 Рацион
2. Монгольская песчанка

Какие проблемы решает HTML5

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

  1. Использование <div> для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный <div> частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управленя стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы <div> в алгоритме построения структуры благодаря добавлению нового элемента <section>.
  2. Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов (<article>, <section>, <nav> и <aside>), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент <aside>, позволяющий исключить такие разделы из основной структуры.
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: <nav> для наборов ссылок, например, оглавления, <footer> и <header> для информации, касающейся всего сайта. Обратите внимание, что <header> и <footer> не создают разделы как <section>, а, скорее, обеспечивают семантическую разметку частей раздела.

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

Алгоритм создания структуры HTML5

Задание разделов в HTML5

Весь контент, находящийся внутри <body>, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом <body>, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов <body><section><article><aside> и <nav>

Note: Каждый раздел может иметь собственную иерархию заголовков. Следовательно, даже вложенный раздел может иметь <h1>. См. «Задание заголовков в HTML5».

Например:

<section>
  <h1>Лесные слоны</h1> 
  <section>
    <h1>Введение</h1>
    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
  </section>
  <section>
    <h1>Среда обитания</h1>
    <p>Лесные слоны живут не на деревьях, а под ними.</p>
  </section>
  <aside>
    <p>рекламный блок</p>
  </aside>
</section>
<footer>
  <p>(c) 2010 The Example company</p>
</footer>

Данный фрагмент HTML задает раздел верхнего уровня:

<section>
  <h1>Лесные слоны</h1>    
  <section>     
    <h1>Введение</h1>     
    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
  </section>   
  <section>     
    <h1>Среда обитания</h1>
    <p>Лесные слоны живут не на деревьях, а под ними.</p>
  </section>
  <aside>
    <p>рекламный блок</p>
  </aside>
</section>
<footer>
  <p>(c) 2010 The Example company</p>
</footer>

Данный раздел имеет три подраздела:

<section>
  <h1>Лесные слоны</h1>
 
  <section>     
    <h1>Введение</h1>     
    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>
  </section>

  <section>     
    <h1>Среда обитания</h1>
    <p>Лесные слоны живут не на деревьях, а под ними.</p>
  </section>

  <aside>
    <p>рекламный блок</p>
  </aside>
</section>

<footer>
  <p>(c) 2010 The Example company</p>
</footer>

В результате получаем следующую структуру:

1. Лесные слоны
   1.1 Введение
   1.2 Среда обитания

Задание заголовков в HTML5

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) задает заголовок текущего раздела.

Элемент заголовка имеет определенную степень важности, определяемую цифрой в его названии, таким образом, <h1> имеет максимальную степень важности, а <h6> минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

<section>
  <h1>Лесные слоны</h1>    
  <p>В данном разделе мы поговорим о малоизвестных лесных слонах. 
    ...продолжение данного раздела...
  <section>
    <h2>Среда обитания</h2>  
    <p>Лесные слоны живут не на деревьях, а под ними.
        ...продолжение данного подраздела...
  </section>
</section>
<section>
  <h3>Монгольская песчанка</h3>
  <p>В данном разделе мы расскажем о монгольской песчанке. 
     ...продолжение данного раздела...
</section>

приводит к следующей структуре:

1. Лесные слоны
   1.1 Среда обитания
2. Монгольская песчанка

Обратите внимание, что степень важности элемента заголовка (в данном примере <h1> для первого раздела верхнего уровня, <h2> для подраздела <h3> для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

Неявное задание разделов

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

Элементы заголовков (<h1><h6>) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел распологается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

<section>
  <h1>Лесные слоны</h1>  
  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
    ...продолжение данного раздела...
  <h3 class="implicit subsection">Среда обитания</h3>
  <p>Лесные слоны живут не на деревьях, а под ними.
    ...продолжение данного подраздела...
</section>

приводит к следующей структуре:

1. Лесные слоны
   1.1 Среда обитания (неявно задано элементом h3)

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

<section>
  <h1>Лесные слоны</h1>  
  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
    ...продолжение данного раздела...
  <h1 class="implicit section">Монгольская песчанка</h1>
  <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.
    ...продолжение данного раздела...
</section>

приводит к следующей структуре:

1. Лесные слоны
2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел)

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

<body>
  <h1>Млекопитающие</h1>
  <h2>Киты</h2>
  <p>В данном разделе мы поговорим о китах.
    ...продолжение данного раздела...
  <section>
    <h3>Лесные слоны</h3>  
    <p>В данном разделе мы поговорим о малоизвестных лесных слонах.
    ...продолжение данного раздела...
    <h3>Монгольская песчанка</h3>
      <p>Песчанки распространились далеко за пределы Монголии.
         ...продолжение данного подраздела...
    <h2>Рептилии</h2>
      <p>Рептилии – это холоднокровные животные.
          ...продолжение данного раздела...
  </section>
</body>

приводит к следующей структуре:

1. Млекопитающие
   1.1 Киты (неявно задается элементом h2)
   1.2 Лесные слоны (явным образом задается элементом раздела)
   1.3 Монгольская песчанка (неявно задается элементом h3, который одновременно закрывает предыдущий раздел)
2. Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел)

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

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

Корни задания разделов

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо <body>, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: <blockquote>, <details>, <fieldset>, <figure> и <td>.

Например:

<section>
  <h1>Лесные слоны</h1> 
  <section>
    <h2>Введение</h2>
    <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>
  </section>
  <section>
    <h2>Среда обитания</h2>
    <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «<cite>Лесной слон на Борнео</cite>»:</p>
    <blockquote>
       <h1>Борнео</h1>
       <p>Лесной слон живет на Борнео...</p>
    </blockquote>
  </section>
</section>

Данный пример приводит к следующей структуре:

1. Лесные слоны
   1.1 Введение
   1.2 Среда обитания

Данная структура не включает внутреннюю структуру элемента <blockquote>, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

Разделы, не входящие в структуру

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

  1. Элемент вспомогательного раздела <aside> задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
  2. Элемент навигационного раздела <nav> задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.

Шапки и подвалы

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

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

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

Адреса в элементах задания разделов

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента <address>, расширенного в HTML5.

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

Использование элементов HTML5 в браузерах, не поддерживающих Non-HTML5

Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline:

section, article, aside, footer, header, nav, hgroup {
  display:block;
}

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

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
<![endif]-->

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержа скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент <noscript>:

<noscript>
   <strong>Внимание!</strong>
   Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
   Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
</noscript>

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

<!--[if lt IE 9]>
  <script>
    document.createElement("header" );
    document.createElement("footer" );
    document.createElement("section"); 
    document.createElement("aside"  );
    document.createElement("nav"    );
    document.createElement("article"); 
    document.createElement("hgroup" ); 
    document.createElement("time"   );
  </script>
  <noscript>
     <strong>Внимание!</strong>
     Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.
     Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.
  </noscript>
<![endif]-->

Заключение

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

Метки документа и участники

Внесли вклад в эту страницу: Wingear, evgor80, lerniri
Обновлялась последний раз: Wingear,