Почему элемент заголовка HTML5 требует тега ах?

Согласно HTML5Doctor.com и другим вводным сайтам HTML5, элемент заголовка должен содержать тег h1-h6 плюс другой навигационный или вводный контент. Тем не менее, традиционный "заголовок" на большинстве сайтов состоит только из логотипа и некоторых навигационных элементов.

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

Тег h1 появляется в разделе контента 95% веб-сайтов, а не в разделе заголовка. Итак, почему мы проинструктированы включить тег ах в заголовке? Если мы должны, почему бы Facebook и Twitter не использовать вместо этого тег h6?

Источник

3 ответа

Решение

Вы должны взглянуть на алгоритм схемы для HTML5.

Вы, вероятно, хотите, чтобы заголовок / логотип вашего сайта был h1,

Представьте себе небольшую веб-страницу, состоящую из заголовка страницы (логотип, название сайта, …), навигации по сайту и записи в блоге (основное содержание этой страницы):

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>ACME Inc.</header>

 <div class="navigation">
  <ul>…</ul>
 </div>

 <div class="content">
  <h1>Lorem Ipsum</h1>
  <p>…</p>
 </div>

</body>

Здесь единственным заголовком является h1 внутри div, Семантически это будет означать, что все содержимое этой страницы входит в объем данного заголовка. Смотрите схему этой страницы:

  1. Лорем Ипсум

Но это не будет правдой (семантическим способом): иерархически, заголовок страницы "ACME Inc." не является "частью" записи в блоге. То же самое касается навигации; это навигация по сайту, а не навигация для "Lorem Ipsum".

Поэтому заголовок сайта и навигация по сайту нуждаются в заголовке. Давайте попробуем дать им h1, тоже:

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <div class="navigation">
  <h1>Site navigation</h1>
  <ul>…</ul>
 </div>

 <div class="content">
  <h1>Lorem Ipsum</h1>
  <p>…</p>
 </div>

</body>

Лучше! Контур страницы теперь выглядит так:

  1. ACME Inc.
  2. Навигация по сайту
  3. Лорем Ипсум

Но это все еще не идеально: они все на одном уровне, но "ACME Inc." это то, что заставляет все веб-страницы формировать веб-сайт, в этом вся суть, почему вообще существуют веб-страницы. Навигация и запись в блоге являются частью "ACME Inc.", которая представляет компанию и сам сайт.

Таким образом, мы должны перейти и изменить заголовки навигации и записи в блоге с h1 в h2:

<body>
 <!-- not using sectioning elements, for the sake of the example -->

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <div class="navigation">
  <h2>Site navigation</h2>
  <ul>…</ul>
 </div>

 <div class="content">
  <h2>Lorem Ipsum</h2
  <p>…</p>
 </div>

</body>

Теперь у нас есть этот план:

  1. ACME Inc.
    1. Навигация по сайту
    2. Лорем Ипсум

И это именно то, что означает содержание примера веб-страницы. (Кстати, это будет работать и в HTML 4.01.)

Как объясняется в ссылке, HTML5 дает нам элементы секционирования, которые играют важную роль для структуры (вместо div, что не влияет на контур) Мы должны использовать их:

<body>

 <header>
  <h1>ACME Inc.</h1>
 </header>

 <nav>
  <h2>Site navigation</h2>
  <ul>…</ul>
 </nav>

 <article>
  <h2>Lorem Ipsum</h2
  <p>…</p>
 </article>

</body>

Контур остается прежним. Мы могли бы даже изменить h2 (внутри nav и article) вернуться к h1контур тоже останется прежним.

Если вам не нужен "явный" заголовок для навигации, вы можете удалить его: контур остается прежним (теперь с неявным /"неназванным" заголовком для nav). Каждый раздел имеет заголовок, независимо от того, добавляете вы его или нет.

Вы могли бы даже изменить h1 внутри header в h6 и это не изменит схему. Вы можете думать об этом заголовке как о "заголовке body".

Дополнительные примечания

  • header элемент не нужен в этих примерах. Я только добавил это, потому что вы упомянули это в своем вопросе.
  • Если вы хотите использовать логотип вместо текстового имени ("ACME Inc."), вам все равно следует использовать h1 и добавить img как ребенок. Значение alt атрибут должен дать имя тогда.
  • Заголовок верхнего уровня не должен быть "самым важным или наиболее информативным элементом на странице". Это не то, для чего используются заголовки. Они дают структуру / схему и "маркируют" их объем содержания. В этом примере вы можете предположить, что article (с заголовком внутри) является наиболее важным содержанием.
  • Если вы используете элементы секционирования каждый раз, когда это необходимо, вам не нужно h2...h6 больше (но вы можете использовать их, для ясности или обратной совместимости).
  • Вы можете поиграть и протестировать некоторые конструкции разметки с HTML Outliner: http://gsnedders.html5.org/outliner/ (там было несколько нефиксированных ошибок) HTML5 Outliner.
Источник

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

Источник

Это гибкая, но важная концепция для SEO и базового программирования HTML. Несмотря на то, что в этом стандарте есть место для шатания, он не будет создавать или разрушать ваш сайт.

Например, вы упомянули, что в заголовке Facebook есть логотип вместо H1. Это наполовину верно, поскольку у них есть заголовок в паре тегов h1, что делает его функцию практически такой же, как и любой другой текст H1:

<h1><a href="https://www.facebook.com/" title="Go to Facebook Home"><i class="fb_logo img sp_-NykExE5Q03 sx_a7f409"><u>Facebook logo</u></i></a></h1>

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

Источник
Другие вопросы по тегам