web-dev-qa-db-ja.com

HTML5でh1を適切に使用する方法

ページを構成する正しい方法は次のうちどれですか。

1）h1のみheader

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

サイトのタイトルとしてheader内でのみh1を使用すると、すべてのページにh1タグの同じコンテンツが含まれます。それはあまり有益ではないようです。

2）h1 in headerおよびsection、サイトおよびページタイトルの両方

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

headerタグとsectionタグの両方でh1を複数回使用する例も見ました。ただし、同じページに2つのタイトルがあるのは間違っていませんか？この例は、複数のヘッダーと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はメインのsection要素内でh1を使用することを推奨しているようですが、それはheader要素で使用すべきではないということですか？

セクションには任意のランクの見出しを含めることができますが、著者はh1要素のみを使用するか、セクションのネストレベルに適切なランクの要素を使用することを強くお勧めします。

htmlhtml5seosemanticssemantic-markup
76
deb

私がコメントで述べ、W3Cで引用しているように、h1は見出しであり、タイトルではありません。各セクション要素は、独自の見出し要素を持つことができます。 h1をページのタイトルとしてのみ考えることはできませんが、ページの特定のセクションの見出しとして考えてください。新聞のトップページと同様に、各記事には独自の見出し（またはタイトル）を付けることができます。

これに関する良い記事があります。

59
Rob

全体で_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要素内のすべてがドキュメントアウトラインの1レベルで「降格」されることを知っています。したがって、たとえば_section > h1_は_h2_のように意味的に処理され、_section > section > h1_は_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>_要素 を使用できます。この要素にはページ固有の情報のみが含まれ、ナビゲーションリンク、サイトヘッダー/フッターなど、サイト全体で繰り返されるコンテンツは含まれません。only one _<main><body>_に存在する__要素。そのため、ソリューションは次のように簡単な場合があります。

_<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>
_
14
chharvey

ただし、アクセシビリティの問題を忘れないでください。 [〜＃〜] mdn [〜＃〜] によると、「グラフィカルブラウザまたは支援技術ユーザーエージェントには、現在、 アウトラインアルゴリズム の既知の実装はありません。」つまり、スクリーンリーダーは、<h1>だけではセクションの相対的な重要性を把握できない可能性があります。 <h2>や<h3>など、より多くの見出しレベルが必要になる場合があります。

5
Michael McGinnis