Элементы h1 - h6 и hgroup являются заголовками.

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

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

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

Вот пример:

<body>
 <h1>Foo</h1>
 <h2>Bar</h2>
 <blockquote>
  <h3>Bla</h3>
 </blockquote>
 <p>Baz</p>
 <h2>Quux</h2>
 <section>
  <h3>Thud</h3>
 </section>
 <p>Grunt</p>
</body>

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Получаем следующую структуру:

Foo (заголовок раздела body, который содержит абзац «Grunt»)

Bar (заголовок раздела, который содержит цитату и абзац «Baz»).

Quux (заголовок, который не содержит в себе никакого контента, кроме самого себя)

Thud (заголовок для элемента section)

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

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

Следующая запись является правильной:

<body>
 <h4>Apples</h4>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <h6>Sweet</h6>
  <p>Red apples are sweeter than green ones.</p>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
 </section>
</body>

Однако, тот же документ может быть представлен в следующем виде:

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h2>Taste</h2>
  <p>They taste lovely.</p>
  <section>
   <h3>Sweet</h3>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h2>Color</h2>
  <p>Apples come in various colors.</p>
 </section>
</body>

Оба документа имеют одинаковое семантическое значение и будут создавать одинаковое оглавление.

Третий пример также семантически идентичный.

<body>
 <h1>Apples</h1>
 <p>Apples are fruit.</p>
 <section>
  <h1>Taste</h1>
  <p>They taste lovely.</p>
  <section>
   <h1>Sweet</h1>
   <p>Red apples are sweeter than green ones.</p>
  </section>
 </section>
 <section>
  <h1>Color</h1>
  <p>Apples come in various colors.</p>
 </section>
</body>

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.