Семантическая разметка для заголовка сайта, даже с outliner

Question

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

<header class="site-header">
    <hgroup class="site-brand">
        <h1 class="brand-name">
            Brand Name
        </h1>
        <h2 class="brans-slogan">
            Awesome Slogan
        </h2>
    </hgroup>
</header>
<article>
    <header class="article-header">
        <h1 class="article-title">Article Header</h1>
    </header>
    [... content ...]
</article>

Казалось бы header правильный тег для заголовка сайта, но после прочтения спецификации и описания этого кода, я увидел два недостатка

• header тег делает его содержание первым уровнем, а заголовок статьи - вторым
• Заголовки сайта могут вообще не содержать заголовков, поскольку их цель - сообщить пользователю, к какой странице принадлежит.

Какой будет лучший подход?

Answer 1

Ваша первая проблема - у вас есть два тега h1. Это НЕ правильная семантическая разметка. Вы правы в отношении тега заголовка, и было бы предпочтительнее поместить в эту область высокоуровневые теги h.

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

В спецификации говорится: "Элемент заголовка обычно содержит заголовки раздела (элемент h1-h6 или элемент hgroup), а также контент, такой как вводный материал или навигационные пособия для раздела".

Это не должно, хотя. Тег h1 (и тег title) являются вашими основными семантическими показателями для страницы. Вам НЕ нужны 2 тега h1 или теги заголовка, но эти два тега не обязательно должны сочетаться... но было бы неплохо, если бы вы могли создать такую ​​архитектуру.

Answer 2

Ваше использование header в этом примере все в порядке.

Тем не менее, это не очень нужно здесь. Если вы включите только h1-h6 а также hgroupВам не нужно указывать, что это заголовок, потому что он уже понятен по определению. header полезно, если вы хотите включить дополнительный контент, для которого не обязательно ясно, что он должен принадлежать заголовку по сравнению с основным контентом.

Но нет вреда в использовании header только для заголовков, так что продолжайте, если вам это нравится, вам это нужно для хуков CSS/JS, может включать дополнительное содержимое заголовка в будущем и т. д.

header тег делает его содержание первым уровнем, а заголовок статьи - вторым

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

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

header элемент не должен содержать заголовок. Например, этот пример будет в порядке:

<article>
  <header>I visited Berlin last week and in this post I document what I liked about it.</header>
  <p>…</p>
</article>

footer элемент похож, и для некоторого контента оба элемента могут быть подходящими.

Если вы хотите приписать автора статьи, он будет footer,