H1 на странице статьи - название сайта или статьи?

Question

На странице, ориентированной на статью (такой как сообщение в блоге), <h1> элемент (заголовок уровня 1) обычно используется для разметки либо:

• название блога (т.е.часто крупный заголовок сайта в верхней части страницы, не к тому <title> элемент), или
• название статьи

Каков наилучший выбор и почему?

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

С точки зрения того, что вы пытаетесь донести до пользователя, название сайта имеет меньшее значение - содержание статьи - это то, что вы пытаетесь донести, а все остальное содержимое сайта вторично.Поэтому, используя <h1> для названия статьи кажется лучше всего.

Я чувствую, что <h1> элемент должен быть сосредоточен на названии статьи, а не на названии сайта или другом контенте.Это ни в коем случае не похоже на популярное соглашение.

Примеры:

• Джоэл Спольский использование <h1> для названия статьи и привязки к названию сайта
• Джефф Этвуд использование НЕТ <h1> вообще, <h2> для названия статьи и привязки к названию сайта
• 37 SVN сигналов' использование <h1> для названия сайта и привязки к названию статьи

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

Я думаю, что Джоэл во второй раз правильно понял Джеффа.Я весьма удивлен выбором разметки сотрудниками 37Signals.

Мне это кажется довольно простым решением:что имеет наибольшее значение для потребителя статьи?Название статьи.Поэтому оберните название статьи в <h1> элемент.Выполнено.

Я ошибаюсь?Есть ли еще какие-то соображения, которые я упускаю из виду?Я прав?Если да, то почему '<h1> для названия статьи "подход, который не используется чаще?

Является решением о том, где использовать <h1> элемент столь же неизменный, как я выразился?Или есть еще какие-то субъективные соображения, которые следует принять во внимание?

Обновить:Спасибо за все ответы на данный момент.Я был бы действительно признателен за некоторую точку зрения на то, как использование <h1> название статьи вместо названия сайта улучшает удобство использования и доступность (или нет, в зависимости от обстоятельств).Ответы, основанные на фактах, а не просто на личных предположениях, принесут вам много бонусных баллов!

Answer 1

Существует Совет по обеспечению качества W3C об этой теме:

<h1> является HTML-элементом для заголовка документа первого уровня:

• Если документ в основном является автономным, например, Что посмотреть и чем заняться в Женеве, то верхний уровень заголовок, вероятно, совпадает с заголовком.

• Если это часть коллекции, например, раздел о Собаки в коллекции страниц, о домашние животные, затем верхний уровень заголовком следует взять определенное количество контекст;просто напиши <h1>Dogs</h1> в то время как заголовок страницы должен работать в любом контекст:Собаки - Ваш путеводитель по домашним животным.

Answer 2

Для пользователя программы чтения с экрана уровень заголовка не имеет значения, если он согласован.Разные блоги используют разные соглашения, поэтому не существует стандартного способа сделать его более доступным.Более важно убедиться, что заголовки соответствуют уровню контента, чем то, какой уровень заголовка используется.Например, при отображении серии записей в блоге с комментариями все записи в блоге могут иметь уровень заголовка 2, а в начале комментариев у вас может быть уровень заголовка 3.В качестве примера удобных для навигации заголовков найдите любую статью Википедии с несколькими разделами и подразделами.Я могу легко пропустить основные разделы, используя функцию навигации по заголовкам в программе чтения с экрана, чтобы перейти к любому заголовку уровня 2, и если я захочу перейти к подразделам данного раздела, я перейду к следующему заголовку.

Answer 3

На домашней странице вашего блога я бы использовал H1 для обозначения названия сайта и H2 для заголовков отдельных записей в блоге, которые публикуются на главной странице.

Однако при вводе конкретной статьи я бы использовал H1 для названия статьи и привязку для названия сайта.

Это приятная семантическая настройка, которая также будет оценена Google при обходе вашего сайта.

Answer 4

В Википедии тег h1 содержит название статьи, а заголовки в документе начинаются с h2.Название Wikipedia является частью тега title в html-заголовке.Я тоже думаю, что это правильный путь.Итак, для блогов я бы поступил так, как Джоэл Спольский в приведенных вами примерах.

И я бы всегда начинал с самого высокого уровня, так что выпускать h1, на мой взгляд, плохой вариант.

Answer 5

В <head> часть HTML-страницы содержит элемент с именем <title>.Как следует из названия, это относится к названию сайта.

HTML используется для структурирования страницы в форму, доступную для машинного анализа, а не для верстки.Если бы речь шла только о разметке, вы могли бы использовать только <div> и <span> блоки с разными классами / идентификаторами и применяйте к ним CSS.Вместо

<h2>Sub Header</h2>

Я мог бы использовать

<div class="header2>Sub Header</div>

и где-то есть какой-то CSS-код, который сделает это <div> выглядит как h2 (размер шрифта, жирный шрифт и т.д.).Разница в том, что компьютер не может знать, что мой <div> на самом деле это заголовок второго уровня в первом примере (откуда ему это знать?Я мог бы назвать его иначе, чем "header2"), однако в первом случае он знает, что это заголовок второго уровня, по тому факту, что это <h2> элемент, и если он хочет показать пользователю структурированный список заголовков страницы, он может это сделать

• Заголовок верхнего уровня
  • Вложенный заголовок
    • Заголовок Sub Sub
  • Вложенный заголовок
  • Вложенный заголовок
• Заголовок верхнего уровня
  • Вложенный заголовок
    • Заголовок Sub Sub
    • Заголовок Sub Sub
  • Вложенный заголовок
    :
    

путем поиска H1/H2/H3/...элементы и структурирование их, как описано выше.Итак, если компьютер попытается узнать заголовок страницы, где он будет его искать?В элементе с именем <title> или в элементе с именем <h1>?Подумайте об этом на мгновение, и у вас будет свой ответ.

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

<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>

Используйте CSS для оформления #title так, как тебе нравится.Сделайте его супер большим и супер смелым и сделайте броский цвет, если хотите, ничто не говорит против этого.Автоматические анализаторы страниц обычно в некоторой степени игнорируют div и span, поскольку это им ничего не говорит (это элементы, используемые для верстки страницы для читателя, но они ничего не говорят о структуре страницы. МАКЕТ - это не СТРУКТУРА, вы можете применить стиль только к определенным структурным элементам для создания макета, но один не следует путать с другим).Тем не менее, компьютер будет знать, каков заголовок страницы, он знает это благодаря элементу title.

Answer 6

Для типичного веб-сайта, напримерблог, the h1 должен содержать название сайта.Да, на каждый страница сайта.

Почему?На веб-сайте существуют различные части, которые являются общими для всех его веб-страниц.Давайте возьмем навигацию в качестве примера:

<ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Это #site-navigation повторяется на каждой странице сайта.Он представляет навигацию по сайту, а не по странице.Разница очень важна!{Навигация по странице может представлять собой оглавление (как в статье Википедии) или разбивку на страницы для длинной статьи.}

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

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Таким образом, эта разметка передает:Навигация (→ начата с помощью h2) является частью статьи (→ начато h1).Но это неправда, эта навигация не является навигацией по статье.Ссылки действительно являются частью всего сайта, и сайт представлен заголовком сайта.

Проблема становится яснее, когда статья также содержит подзаголовки:

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Как вы можете видеть, нет никакого способа отличить подзаголовки статей от навигации.Похоже, что статья состоит из трех подзаголовков:"Почему я веду блог", "Почему вы должны прочитать мой блог" и "Навигация".

Итак, если мы вместо этого используем h1 для названия сайта и h2 для заголовка статьи навигация может осуществляться в рамках заголовка сайта, используя h2, слишком:

<body>
  <h1>John’s blog</h1> <!-- the site title -->
  <h2>My first blog post</h2> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Теперь эта разметка передает:Существует сайт под названием "Блог Джона" (→ созданный h1) и он содержит статью (→ начатую первым h2) и навигация по сайту (→ начата вторым h2).Подзаголовками статьи были бы h3 сейчас, конечно.

---

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

HTML5 формализует это с помощью алгоритм секционирования / выделения.Это решает многие проблемы с описанием, которые могли возникнуть у вас с HTML 4.01, потому что порядок содержимого теперь может быть (в основном) бесплатным, и вам не нужно "изобретать" фактические заголовки, если вы этого не хотите, благодаря section/article/nav/aside.Но также и в HTML5 заголовок сайта должен быть h1 это дитя body но не дочерний элемент какого-либо разделяющего элемента / root.Все остальные разделы находятся в рамках данного раздела сайта.

Answer 7

H1 на странице статьи - название сайта или статьи?

И то, и другое.Эта статья носит информативный характер: Правда о нескольких тегах H1 в эпоху HTML5.

Answer 8

Должен быть только один, и должен быть только один

h1

;обычно это заголовок страницы.Затем должны следовать h2, h3 и т.д.

Таким образом, ваша страница может выглядеть следующим образом (без всех остальных html-тегов)

h1
  h2
  h2
    h3
..etc