H1 на странице статьи - заголовок сайта или заголовок статьи?
На странице, ориентированной на статьи (например, в блоге), элемент <h1> (заголовок уровня 1) обычно используется для разметки:
- заголовок блога (т.е. часто большой заголовок сайта вверху страницы, нет для элемента
<title>), или - заголовок статьи
Какой лучший выбор и почему?
Владельцу сайта, который может захотеть выкрикнуть всему миру название своего сайта / блога, использование заголовка уровня 1 вокруг названия сайта может показаться разумным.
С точки зрения того, что вы пытаетесь сообщить пользователю, заголовок сайта имеет меньшее значение: содержание статьи - это то, что вы пытаетесь сообщить, а все остальное содержание сайта является второстепенным. Поэтому лучше всего использовать <h1> для заголовка статьи.
Я считаю, что элемент <h1> должен фокусироваться на заголовке статьи, а не на заголовке сайта или другом контенте. Это никоим образом не кажется популярным соглашением.
Примеры:
- Джоэл Спольски использует
<h1>для заголовка статьи и якорь для заголовка сайта. - Джефф Этвуд использует нет
<h1>вообще,<h2>для заголовка статьи и привязку для заголовка сайта. - 37 Сигналов 'SVN использует
<h1>для заголовка сайта и привязку для заголовка статьи.
Это три разных подхода на трех сайтах, где можно ожидать серьезного внимания к правильной семантической разметке.
Я думаю, что у Джоэла все в порядке с Джеффом, на втором месте. Я очень удивлен тем, как люди из 37Signals выбрали разметку.
Мне это кажется довольно простым решением: что имеет наибольшее значение для потребителя статьи? Название статьи. Поэтому оберните заголовок статьи в элемент <h1>. Сделанный.
Я ошибаюсь? Есть ли еще какие-то соображения, которые мне не хватает? Я прав? Если да, то почему подход «<h1> для названия статьи» не используется чаще?
Является ли решение о том, где использовать элемент <h1>, таким же неизменным, как я его выразил? Или есть еще какие-то субъективные соображения?
Обновлять: Спасибо за все ответы. Я действительно был бы признателен за то, как использование <h1> для заголовка статьи вместо заголовка сайта повышает удобство использования и доступность (или нет, в зависимости от обстоятельств, а может и не быть). Ответы, основанные на фактах, а не на личных предположениях, принесут много бонусных баллов!
Ответы 8
Должен быть только один, и должен быть только один
h1; usually this is the page title. Then it should follow h2, h3 etc.
Итак, ваша страница может выглядеть так (без всех других тегов html)
h1
h2
h2
h3
..etc
В этом случае возникает вопрос: заголовок страницы - это заголовок сайта или заголовок статьи?
На домашней странице вашего блога я бы использовал H1 для обозначения заголовка сайта и H2 для заголовков отдельных сообщений блога, которые публикуются на главной странице.
Однако при вводе конкретной статьи я бы использовал H1 для заголовка статьи и якорь для заголовка сайта.
Это хорошая и семантическая настройка, которая также будет оценена Google при сканировании вашего сайта.
По этой теме есть Совет W3C по обеспечению качества:
<h1>is the HTML element for the first-level heading of a document:
If the document is basically stand-alone, for example Things to See and Do in Geneva, the top-level heading is probably the same as the title.
If it is part of a collection, for example a section on Dogs in a collection of pages about pets, then the top level heading should assume a certain amount of context; just write
<h1>Dogs</h1>while the title should work in any context: Dogs - Your Guide to Pets.
Спасибо, это объяснение было полезным. Вот еще одно хорошее описание, которое расширяет сказанное выше: webmasters.stackexchange.com/questions/4515/…
Обратите внимание, что это не W3C Рекомендация, это просто ненормативный совет от группы QA W3C.
В Википедии тег h1 содержит название статьи и заголовки в документе, начинающиеся с h2. Название «Википедия» является частью тега заголовка в html-заголовке. Я тоже думаю, что это правильный путь. Так что для блогов я бы хотел, чтобы Джоэл Спольски в приведенных вами примерах.
И я всегда начинал с самого высокого уровня, поэтому выпускать h1, на мой взгляд, плохой вариант.
В части <head> HTML-страницы есть элемент с именем <title>. Как следует из названия, это для заголовка сайта.
HTML используется для структурирования страницы в форме, пригодной для машинного анализа, а не для разметки. Если бы речь шла только о компоновке, вы могли бы использовать только блоки <div> и <span> с разными классами / идентификаторами и применять к ним CSS. Вместо
<h2>Sub Header</h2>
Я мог бы использовать
<div class = "header2>Sub Header</div>
и где-то есть код CSS, который сделает этот <div> похожим на h2 (размер шрифта, жирный шрифт и т. д.). Разница в том, что компьютер не может знать, что мой <div> на самом деле является заголовком второго уровня в первом примере (откуда ему это знать? Я мог бы назвать его иначе, чем "header2"), однако в первом случае он знает что это заголовок второго уровня, потому что это элемент <h2>, и если он хочет показать пользователю структурированный список заголовков страницы, он может это сделать
- Заголовок верхнего уровня
- Подзаголовок
- Подзаголовок
- Подзаголовок
- Подзаголовок
- Подзаголовок
- Заголовок верхнего уровня
- Подзаголовок
- Подзаголовок
- Подзаголовок
- Подзаголовок
:
- Подзаголовок
путем поиска элементов 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, поскольку они ничего не говорят им (это элементы, используемые для макета страницы для читателя, но они ничего не говорят о структуре страницы. ПЛАН - это не СТРУКТУРА, вы можете применить стиль только к определенным структурные элементы для создания макета, но не следует путать один с другим). Тем не менее, компьютер будет знать, что такое заголовок страницы, благодаря элементу заголовка.
Спасибо за исчерпывающий ответ. Однако я не искал объяснений того, как применять структуру к стилю и тому подобное. Меня больше интересует семантическая разница между использованием <h1> вокруг заголовка сайта вместо заголовка статьи (или наоборот).
Джон, я думаю, Меки тоже ответил на этот вопрос. «Правильным», но менее используемым соглашением было бы не использовать H1 вокруг заголовка сайта.
Для пользователя программы чтения с экрана уровень заголовка не имеет значения, если он согласован. В разных блогах используются разные соглашения, поэтому стандартного способа сделать их более доступными не существует. Убедиться, что заголовки соответствуют уровню контента, важнее, чем то, какой уровень заголовка используется. Например, при отображении серии сообщений в блоге с комментариями все сообщения в блоге могут иметь уровень заголовка 2, а в начале комментариев у вас может быть уровень заголовка 3. В качестве примера удобной навигации по заголовкам найдите любую статью Википедии с несколькими разделами и подразделов. Я могу легко пропустить основные разделы, используя средства чтения с экрана, перемещаясь по заголовку, чтобы перейти к любому заголовку уровня 2, и если я хочу перейти к подразделам данного раздела, я перейду к следующему заголовку.
Для типичного веб-сайта, например блог, 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, но не дочерним элементом какого-либо элемента / корня секционирования. Все остальные разделы попадают в эту рубрику сайта.
H1 in article page - site title or article title?
И то и другое. Эта статья носит информативный характер: Правда о нескольких тегах H1 в эпоху HTML5.