Как правильно использовать h1 в HTML5

Что из следующего является правильным способом структурирования страницы:

1) h1 только в header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

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

2) h1 в header и section, как для сайта, так и для заголовка страницы

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Я также видел примеры использования h1 более одного раза в тегах header и section. Однако разве не неправильно иметь два заголовка для одной и той же страницы? В этом примере показано несколько тегов заголовка и h1 http://orderedlist.com/resources/html-css/structural-tags-in-html5/

3) h1 только в section, с выделением заголовка страницы

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Наконец, W3, кажется, рекомендует использовать h1 в основном элементе section, означает ли это, что я не должен использовать его в элементе header?

Разделы могут содержать заголовки любого ранга, но авторам настоятельно рекомендуется либо использовать только элементы h1, либо использовать элементы соответствующего ранга для уровня вложенности раздела.


html seo semantics semantic-markup
person deb    schedule 13.09.2011    source источник
comment
Прочтите интересное по теме: iheni.com/html-5 -to-the-h1-дебаты-спасение   -  person Michael Jasper    schedule 13.09.2011

Ответы (3)


arrow_upward
61
arrow_downward

Как я заявляю в своем комментарии и вы цитируете в W3C, h1 - это заголовок, а не заголовок. Каждый элемент секционирования может иметь свой собственный элемент (-ы) заголовка. Вы не можете думать о h1 только как о заголовке страницы, а как о заголовке этого конкретного раздела страницы. Как и на первой странице газеты, у каждой статьи может быть свой заголовок (или заголовок).

Вот хорошая статья по этому поводу.

person Rob    schedule 13.09.2011
comment
Понятно. Так что можно использовать h1 более одного раза в HTML5. Из статьи «В HTML 5 вы можете специально разметить весь« вторичный »контент на странице, такой как навигация, брендинг, уведомления об авторских правах», какова правильная разметка для брендинга (логотип + заголовок сайта)? - person deb; 15.09.2011
comment
Самым логичным будет элемент заголовка, который вы выбрали. Это введение в любой раздел, а в вашем случае - всю страницу. Внутри вы можете сгруппировать вещи с помощью div, navs, hgroups и т. Д. Или просто оставить изображения такими, какие они есть, элемент самим себе. - person Rob; 15.09.2011
comment
@Rob: у меня вопрос: что определяет «элемент секционирования»? Должен ли он быть реальным <section>, <article> или другим элементом html5 или может быть что-то вроде <div> с классом section или callout ?. - person tenub; 15.09.2014
comment
@tenub article, aside, nav и section - единственные элементы, которые являются элементами секционирования. Вы можете прочитать все об этом здесь: developers.whatwg.org/content- models.html # sectioning-content-0 - person Rob; 16.09.2014

arrow_upward
17
arrow_downward

Я бы рекомендовал использовать h1 повсюду. Забудьте о h2 по h6.

Еще в HTML4 для неявного определения разделов использовались 6 уровней заголовков. Например,

<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>

Теперь с элементом section вы можете явно определять разделы, вместо того, чтобы полагаться на неявные разделы, созданные вашим браузером, читающим различные уровни заголовков. Браузер, оснащенный HTML5, знает, что все внутри элемента section "понижается" на один уровень в структуре документа. Так, например, section > h1 семантически обрабатывается как h2, section > section > h1 похоже на h3 и т. Д.

Что сбивает с толку, так это то, что браузеры ЕЩЕ создают неявные разделы на основе уровней заголовков h2h6, но элементы h2h6 не меняют свои стили. Это означает, что h2, независимо от того, в сколько разделов он вложен, по-прежнему будет выглядеть как h2 (по крайней мере, в Webkit). Это могло бы сбить с толку, если бы ваш h2 должен был быть, скажем, заголовком четвертого уровня.

Смешивание h2h6 с section приводит к очень неожиданным результатам. Просто придерживайтесь только h1 и используйте section для создания явных разделов.

<body>
<!-- optional --><header>
    <h1>This is a top-level heading</h1>
    <p>you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.</p>
<!-- optional --></header>
<section>
    <h1>even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).</h1>
    <p>content in the subsection</p>
</section>
<section>
    <h1>Another subsection begins here, also treated like an h2</h1>
    <p>content</p>
    <h2>This is misleading. it is semantically treated like an h3.</h2>
    <p>that is because after an h1, an h2 is demoted one level. the h1 above is
        already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
    <section>
        <h1>just do this instead.</h1>
        <p>it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

Кроме того, вы можете использовать элемент <main> . Этот элемент содержит только информацию, относящуюся к странице, и не должен включать контент, который повторяется на всем сайте, например ссылки навигации, верхние и нижние колонтитулы сайта и т. Д. В элементе может присутствовать только один <main> <body>. Итак, ваше решение может быть таким простым:

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>
person chharvey    schedule 15.08.2014
comment
Я передумал. Перечитав то, что вы написали, я понимаю, что вы пытаетесь донести, но чувствую, что ваше письмо сбивает с толку; например, пункт о понижении в должности элементов hx, который, если понимать буквально, неверен, но в контексте схемы я могу понять, откуда вы. - person Rob; 18.10.2015
comment
Обратите внимание, что вы не можете вложить ‹main› внутрь ‹article›. Логически имеет смысл отмечать основное содержание каждой статьи (например, основное содержание каждой записи блога, когда весь HTML-документ содержит рендеринг нескольких записей блога), но это не разрешено спецификацией. - person Mikko Rantalainen; 10.04.2017

arrow_upward
9
arrow_downward

Однако не забывайте о проблемах доступности. Согласно MDN, "в настоящее время нет известных реализаций схемы алгоритма в графических браузерах или пользовательских агентах вспомогательных технологий ". Это означает, что программа чтения с экрана не сможет определить относительную важность разделов, содержащих только <h1>. Возможно, потребуется больше уровней заголовков, например <h2> и <h3>.

person Michael McGinnis    schedule 10.10.2017
comment
Итак, если наша цель - доступность, а не SEO, является ли алгоритм схемы и ответ @chharvey спорным? Должны ли мы использовать сценарий OP №1, где h1 - это только заголовок сайта, а все заголовки страниц должны быть h2? - person swhitmore; 22.03.2020
comment
Не совсем. Я согласен с Адрианом Роселли, который говорит использовать один ‹h1› на странице, например, заголовок страницы, а не заголовок сайта. Таким образом, это будет то же содержание, что и тег ‹title›, за исключением названия сайта, маркетингового слогана и т. Д. Алгоритм структуры документа до сих пор не реализован ни в одном браузере. Для заголовков разделов я использую h2. H1 - это заголовок верхнего уровня, независимо от того, где вы его разместите. - person Michael McGinnis; 23.03.2020