HTML 5 Страница без основного <header>?

Разве это плохо? <header>?

У меня есть эта базовая структура, но я думаю об обертывании заголовка вокруг всего между началом тела и содержимым, потому что к заголовку также прикреплена эта хорошая разметка shema.org. Отличная идея?

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

если я делаю это, как я должен разметки <header> прямо сейчас? Раздел внутри заголовка не действителен, верно? Просто нормальный <div> Похоже.

<body>

<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>

<div>content ...

К этому

<body>
<header itemtype="http://schema.org/WPHeader" ...>
<div class="nav1"><h1>brandname</h1><nav>...</nav></div>

<div><h1>brandname</h1><p>slogan</p></div> <!-- sometimes this is not there -->

<div class="nav2"><h1>brandname</h1><nav>...</nav></div>
</header>
<div>content ...

Несколько заголовков также недействительны или? Я думаю об этом, как использование <header> без каких-либо стилей CSS только для семантической разметки. Я мог бы подумать о стилях барьеров, созданных с этим, поэтому не на 100% удовлетворен этим.

Или это действительно.

<body>

<header class="nav1"><h1>brandname</h1><nav>...</nav></header>

<header><h1>brandname</h1><p>slogan</p></header> <!-- sometimes this is not there -->

<header class="nav2"><h1>brandname</h1><nav>...</nav></header>

<div>content ...

// просто читаем html5: используя заголовок или тег нижнего колонтитула дважды? это выглядит так, как будто я придерживаюсь второго решения, поскольку мне не очень нравится идея вообще не иметь заголовка

Не бойтесь отвечать;)

1 ответ

Решение

Определите для каждого корневого элемента секционирования (например, body) и каждый элемент содержимого секционирования (например, article) если он содержит контент, который подходит для header, Спецификация определяет, что это "вводный контент", и приводит следующие примеры:

  • вводные или навигационные пособия
  • заголовок h1-h6 элемент) (не требуется)
  • оглавление, форма поиска или любые соответствующие логотипы

Если есть такой контент, используйте header элемент. Если содержимое этого корневого элемента / элемента содержимого разбросано, используйте несколько header элементы.

Имейте в виду, что header всегда применяется для "своего ближайшего предка, секционирующего контент или секционирующего корневого элемента":

<body>
  <header> <!-- this header is for the whole page --> </header>

  <article>
    <header> <!-- this header is for the whole article element --> </header>

    <div>
      <header> <!-- this header is also for the whole article element (and not only for the div element!) --></header>
    </div>

    <section>
      <header> <!-- this header is for this article’s section element only --> </header>
    </section>

  </article>

  <figure>
    <header> <!-- this header is for the figure element only --> </header>
  </figure>

  <strong>
    <header> <!-- but this header is also for the whole page (and not for the strong element only!) --> </header>
  </strong>

</body>
Другие вопросы по тегам