Як правильно використовувати h1 в HTML5

Question 1

Який із перелічених нижче є правильним способом структурування сторінки:

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, або використовувати елементи відповідного рангу для рівня вкладеності розділу.

Question 2

Як я зазначив у своєму коментарі, а ви цитуєте в W3C, h1 - це заголовок, а не заголовок. Кожен елемент секціонування може мати свої власні елементи заголовка. Ви не можете мислити h1 як заголовок сторінки, а як заголовок цього конкретного розділу сторінки. Як і на першій сторінці газети, кожна стаття може мати свій заголовок (або заголовок).

Ось хороша стаття про це.

Question 3

Я б рекомендував використовувати 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елементі, "знижується" на один рівень у структурі документа. Так, наприклад, a section > h1семантично трактується як a h2, a section > section > h1- як an h3тощо.

Що толку в тому , що браузери STILL створювати приховані розділи , засновані на h2- h6рівнів заголовків, все ж h2- h6елементи не змінюють свої стилі. Це означає, що h2, незалежно від того, в скільки розділів він вкладений, все одно буде виглядати як h2(принаймні у Webkit). Це заплутало б, якби ваш, h2мабуть, був заголовком рівня 4.

Змішування h2- h6з 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>

Question 4

Однак не забувайте про проблеми з доступністю. Згідно з MDN , "в даний час невідомо жодної реалізації алгоритму структури в графічних браузерах чи допоміжних агентах користувачів". Це означає, що засіб зчитування з екрана може бути не в змозі з’ясувати відносну важливість лише розділів <h1>. Може знадобитися більше рівнів заголовків, таких як <h2>і <h3>.