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

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

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

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

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

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

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

Примеры:

Joel Spolsky использует <h1> для названия статьи и якорь для названия сайта
Jeff Atwood вообще не использует <h1>, <h2> для заголовка статьи и якоря для названия сайта
37 SVN SVS использует <h1> для названия сайта и якоря для заголовка статьи

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

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

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

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

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

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

Ответ 1

В этом разделе W3C Quality Assurance по этой теме:

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

Если документ в основном автономный, например, вещи, которые нужно посмотреть и Do в Женеве, на высшем уровне заголовок, вероятно, совпадает с заголовком заглавие.

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 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 Header
- Sub Header
- Sub Header
Верхний уровень заголовка
- Подзаголовок
  - Sub Sub Header
  - Sub Sub Header
- Sub Header
  :

ища элементы 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 до некоторой степени, поскольку они ничего не сообщают (это элементы, используемые для компоновки страницы для читателя, но они ничего не говорят о структуре страницы. LAYOUT не СТРУКТУРА, вы можете применять стиль только к определенным структурным элементам для создания макета, но не следует путать с другим). Тем не менее компьютер будет знать, что за титул страницы, он знает это благодаря элементу title.

Ответ 6

Для типичного веб-сайта, например. блог, 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 повторяется на каждой странице сайта. Он представляет собой навигацию по сайту, а не навигацию по страницам. Разница важна! {Навигация по страницам может быть оглавлением (например, в статье в Википедии) или разбиением на страницы для длинной статьи.}

Если youd использует заголовок статьи как 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>

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

Итак, если вместо заголовка сайта h2 использовать 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. Все остальные разделы включены в заголовок этого сайта.

Ответ 7

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

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

Ответ 8

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

h1

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

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

h1
  h2
  h2
    h3
..etc