Является <header> семантическим или структурным тегом

Возьмите эти две части разметки:

<div id="header">
  <img src="/img/logo.png" alt="MyLogo" />

  <ul id="misc-nav">
    <li>..</li>
  </ul>

  <header>
    <h1>Welcome to Bob Website of Fantastical Conbobulations</h1>
    <p>The smell of invention awaits you...</p>
  </header>
</div>

и

<header>
  <img src="/img/logo.png" alt="MyLogo" />

  <ul id="misc-nav">
    <li>..</li>
  </ul>

  <h1>Welcome to Bob Website of Fantastical Conbobulations</h1>
  <p>The smell of invention awaits you...</p>
</header>

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

Это мое понимание из самой спецификации, что первый пример является правильной интерпретацией, но я вижу, что второй рекламируется как правильный путь.

Можете ли вы предложить какую-либо ясность?

ОТВЕТЫ

Ответ 1

Оба прекрасны. Но что именно вы подразумеваете под "структурным" и "семантическим"?

Ответ 3

Тег заголовка чисто семантический. Однако на самом деле все теги HTML предназначены для контекста содержимого (= семантика).

Используйте CSS для правильного оформления контента.

Ответ 4

Я бы рекомендовал следующую комбинацию разметки и CSS:

В вашем CSS:

header {
    background: #fff url(/img/logo.png) top left no-repeat;
    padding-left: 64px; /* or whatever required to display margin correctly */
}
/* if you REALLY want your navigation to appear as a bulleted list */
nav a { 
    display: list-item; 
}

В разметке вашей страницы:

<nav>
  <a>...</a>
  <a>...</a>
</nav>
<header>
  <h1>Welcome to Bob Website of Fantastical Conbobulations</h1>
  <p>The smell of invention awaits you...</p>
</header>

Таким образом, вы используете семантические теги <header /> и <nav /> для выделения текстового содержимого, а затем с помощью CSS для улучшения презентации с форматированием отображения, изображениями логотипов и т.д.

Я помню - хотя, увы, я не могу найти источники сейчас - что предложенные новые элементы в HTML5 (заголовок, навигатор, нижний колонтитул, в стороне, статья и т.д.) были выбраны на основе анализа базы данных Google веб-сайтов для определения наиболее часто используемые атрибуты идентификатора, назначенные элементам DIV, при условии, что они представляют собой наиболее распространенные сценарии, в которых разработчики используют DIV для переноса значимых элементов своей структуры страницы.

Ответ 5

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

Я думаю, что оба примера - это действительное использование этого элемента, хотя я лично, вероятно, по-разному размету вашего первого:

<header>
  <img src="/img/logo.png" alt="MyLogo" />
  <nav>
    <ul>
      <li>..</li>
    </ul>
  </nav>
  <hgroup>
    <h1>Welcome to Bob Website of Fantastical Conbobulations</h1>
    <h2>The smell of invention awaits you...</h2>
  </hgroup>
</header>

Ответ 6

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

Ответ 7

Если вы прочитаете спецификацию HTML5 W3C, вы обнаружите, что каждая html-страница должна иметь только один тег H1, поэтому, если вы используете h1, тогда h2, тогда h3 вы можете увидеть какой-то странный стиль. Это потому, что браузер ожидает один h1 на каждой странице html, когда он анализирует его.

Таким образом, вы можете вместо этого использовать h1 h2 h3 теги и стилизовать их любым способом.

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

Итак, когда эти приложения читают ваш сайт, они не читают css, а только html и могут читать некоторые javascript. Поэтому, когда они видят lang = "en", они знают, что читают содержимое в элементе на английском и т.д. Когда они видят "раздел", они знают его элемент раздела, и когда они видят "в сторону", они знают, что это какой-то элемент в стороне и т.д.

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

В этом весь смысл новых потрясающих элементов html5. Вы можете сделать одну и ту же веб-страницу только с одним элементом - например, с "div" и с целым рядом новых семантических элементов html5 - статьи, раздела, заголовка, нижнего колонтитула и т.д. Веб-страница будет выглядеть одинаково в веб-браузерах, но интеллектуальные приложения, такие как роботы поисковых систем, будут сканировать страницу лучше, а некоторые приложения, которые читают веб-страницы, будут легче анализировать страницу.

Точка Интернета должна быть открыта для всех людей и бесплатна, и я согласен с этим.

В будущем веб будет развиваться без сомнения, будут созданы новые инструменты, которые будут анализировать веб-страницы, а использование новых семантических элементов html5 сделает ваши веб-страницы в будущем доказательством, поэтому эти новые инструменты будут читать наши страницы с умом.

Надеюсь, это помогло кому-то:)