HTML5 仕様のセクション「見出しとセクション」を読む必要があります。見出しを正しく設定することは、アクセシビリティの重要な側面です。
見出し (およびセクション) を使用して、さまざまなユーザー エージェントに、ページがどのように構成されているか、どのコンテンツが一緒に属し、どのコンテンツが互いに分離されているかを伝えます。
3 つの列を持つ典型的な Web サイトを考えてみてください。最初の列にはサイト ナビゲーションがあり、2 番目の列にはメイン コンテンツがあり、3 番目の列にはサブ コンテンツがあります。さて、見ることができる人間は、ページに 3 つの「領域」があることをすぐに理解できるかもしれません。これは、異なる背景色、余白、境界線などのおかげです。しかし、視覚障害のある人間は、ページのグラフィック デザインから手がかりを得ることができません。マシン (検索エンジンなど) もそうではありません。そのため、見出し/セクション要素を使用して、マークアップから情報 (ページの構造) を取得できるようにします。
各 HTML5 ドキュメントには、見出し (および) および/またはセクション要素 (、、、、) を使用して作成されるアウトラインがあります。これはある種のTOCと考えることができます。h1h6hgroupsectionarticlenavaside
見ることができる人間は、グラフィック デザインを見てページ構造について最初のアイデアを得るのに対し、スクリーン リーダーや機械を使用する人間は、ページのアウトラインを読むことでこのアイデアを得ることができます。
(1.) John Doe's Example Blog
(1.1) Navigation
(1.2) My first year at ACME
(1.3) Recent blog posts
これは、次のサンプル ドキュメントの概要です。
見出しのみを使用する:
<body>
<h1>John Doe's Example Blog</h1>
<h2>Navigation</h2>
<h2>My first year at ACME</h2>
<h2>Recent blog posts</h2>
</body>
計算されたアウトラインに従って、セクション要素と見出しをレベルで使用します。
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h2>Navigation</h2>
</nav>
<article>
<h2>My first year at ACME</h2>
</article>
<aside>
<h2>Recent blog posts</h2>
</aside>
</body>
どこでもセクショニング要素を使用するh1：
<body>
<h1>John Doe's Example Blog</h1>
<nav>
<h1>Navigation</h1>
</nav>
<article>
<h1>My first year at ACME</h1>
</article>
<aside>
<h1>Recent blog posts</h1>
</aside>
</body>
(後者の 2 つは意味的に同等です!)
セクション化要素を使用する場合、見出しを完全に省略することもできます。アウトラインは「無名」ですが、同じままです (これはあまり役に立ちません!)。
<body>
<nav></nav>
<article></article>
<aside></aside>
</body>
これは、対応するアウトラインになります。
(1) (Untitled Section)
(1.1) (Untitled Section)
(1.2) (Untitled Section)
(1.3) (Untitled Section)
このオンライン アウトライナーで遊んで、どのドキュメントがどのアウトラインを作成するかを確認できます。
それで、それらをスキップする必要がありますか？
そもそもレベルをスキップしたいのはなぜですか？それはおそらく決して良いことではないので、レベルを飛ばしてはいけません。しかし、それが起こったとしても、私はそれを重大なエラーとは見なしません。
ただし、スキップの正確さによっては、特にそのレベルのすべての見出しをスキップしない場合、間違ったアウトラインが作成される可能性があることに注意してください。たとえば、次の簡単なドキュメントを参照してください。
<body>
<h1>Interesting stories</h1> <!-- this is the site heading -->
<h2>My first snow</h2> <!-- this is a story -->
<h3>What I thought snow would be like</h3> <!-- this is a subsection of that story -->
<h3>How I experienced it actually</h3> <!-- also subsection -->
<h3>Why I'm disappointed by snow</h3> <!-- also subsection -->
<h2>More stories about snow</h2> <!-- this is not part of the story, but a kind of "See also" for the site/page -->
</body>
ここで、最後h2をに変更するとh3、突然、この「その他の記事」セクションが記事のサブセクションになります。に変更するh4と、サブサブセクションになります。
サイドバーをデザインするとき - どの見出しを使用する必要がありますか? H2? フッターをデザインするとき - どの見出しを使用する必要がありますか? H2?
これらの質問には、一般的に答えることはできません。サイトやページ、コンテンツによって異なります。しかし、はい、多くの場合、「典型的なページ」h2が適切な候補です。ページの見出し (メイン コンテンツの見出しと混同しないでください!) はh1、メイン コンテンツはh2、サブ コンテンツ (サイドバーなど) はh2です。フッターに見出しが必要な場合 (それぞれに必要なわけではありません)、h2この場合も同様です。
とにかく、見出しはリスト（フッターの投稿のリストなど）に使用することを意図していますか?
それは本当に内容と文脈に依存します。
あなたが尋ねなければならない重要な質問（一般的に、すべてのヘディング決定について）：
- このコンテンツは前の見出しに「属します」か?
- もし、そうなら：
- それはある種のサブセクションですか？→ 1 レベル上の見出しを使用してください。要素を使用する
section(オプションでその中の見出し)
- このコンテンツに自然な「小見出し」はありませんか? →ここでは見出しを使用しないでください
- いいえの場合: 1 レベル下の見出しを使用します。問題のセクショニング要素の子ではないセクショニング要素を使用する
- (見出し/セクションが属する見出しの子になるまで、この手順を繰り返す必要があります)
H1ページで 1 回だけ使用する必要がありますか?
いいえ。説明したように、ページ上のすべての見出しに使用できh1ます(セクショニング要素を使用する場合!)。
「投稿リスト ページ」をデザインする場合 (通常、各エントリは TITLE と EXCERPT で構成されます) H1、タイトルに使用する必要がありますか? それとも？H2_DIV
おそらくarticle、各エントリに要素を使用する必要があります。したがって、セクション要素のように、自動的に見出し (= アウトラインのエントリ) が得られますarticle。を使用h1することも ( がどこにarticle配置されていても!)、計算された見出しレベルを使用することもできます (articleが の直接の子である場合はbody、 を使用しますh2。それが 1 レベル深い場合は、 などです) h3。 .)。
有用なアウトラインが作成されるように、セクション要素と見出しを使用します。
Web ページをマークアップする場合は、作成されたアウトラインだけを少し見てください。意味がありますか? ページがどのように構成されているか、どのセクションがあるかを理解していますか? 階層は正しいですか？このアウトラインでページの別の領域/セクションが欠落していますか? セクションは、それが属していないセクションの子ですか? (たとえば、サイトナビゲーションがページのメイン コンテンツの子であることがよくありますが、これはもちろん正しくありません。通常は同じレベルにある必要があり、どちらもサイトヘッダーの子です)。