Должен ли h1 быть первым семантическим элементом в теге заголовка? - PullRequest
Новая
       12

Должен ли h1 быть первым семантическим элементом в теге заголовка?

9 голосов
/ 11 января 2012

Я использую расширение Chrome Outliner для проверки семантики моей страницы. Кажется, проблема в том, чтобы иметь какой-либо структурный элемент до h1 в теге основного заголовка документа. Я думал, что порядок не имеет значения, но, видимо, это имеет значение: 

+Document Body
  +Header
    +nav
      +h1 Main Navigation
    +h1 MyPage
  -Section
  -Footer

Имеет ли план, как это: 

Untitled Body
  Main Navigation
  MyPage
  etc...

Но когда h1 является первым элементом в моем заголовке: 

+Document Body
  +Header
    +h1 MyPage
    +nav
      +h1 Main Navigation
  -Section
  -Footer

это выглядит так: 

MyPage
  Main Navigation
  etc...

Почему это? Глючит ли outliner, или я неправильно понял семантику HTML5? Спецификация W3C, кажется, не упоминает об этом: http://dev.w3.org/html5/spec/Overview.html#the-header-element

Ответы [ 3 ]

7 голосов
/ 20 января 2012

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

Я выполнил следующие два сценария с помощью этого инструмента для разметки HTML и получил те же результаты (My Navigation отображается в My Header):

со вторым элементом h1 под заголовком: 

<body>
<header>
<h1>My Header</h1>
<nav><h1>My Navigation</h1></nav>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>

С первым элементом H1 под заголовком: 

<body>
<header>
<nav><h1>My Navigation</h1></nav>
<h1>My Header</h1>
</header>
<section><h1>My Section</h1></section>
<footer></footer>
</body>
2 голосов
/ 15 января 2012

Почему вы определяете другой тег <h1> вне заголовка своей страницы? Планировщик выбирает два конкурирующих заголовка для вашей страницы и, вероятно, поэтому его отбрасывают. Семантически говоря, главный заголовок страницы может существовать в любом месте внутри вашего раздела <header>, если он уникален и определяет ваш основной заголовок, хотя это не является исключительным свойством раздела <header> или <h1> тег (и мнения варьируются в зависимости от этого описания, но это более обоснованно). Правильный контур определен здесь http://www.w3.org/TR/html5/sections.html#outline.

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

<header>
<nav>
<h1>Title of Page</h1>
<h2>Subtitle</h2>
</header>

Хорошо, потому что правильно понимают, что такое разделы вашего заголовка и заголовка вашей страницы.

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

0 голосов
/ 11 января 2012

Согласно спецификациям <header> не обязательно начинать с <h1>.

Элемент заголовка обычно содержит заголовок раздела. (элемент h1 – h6 или элемент hgroup), но это не обязательно. элемент заголовка также можно использовать для переноса оглавления раздела, форму поиска или любые соответствующие логотипы.

...