web-dev-qa-db-ja.com

HTML5の複数セクションの見出しレベルのセマンティクス

複数のセクションがある場合に、HTML5マークアップで見出しレベルを処理するための最良の、最もセマンティックな方法が何であるかは、よくわかりません。一方では、セクションまたは記事のタイトルとしてH1見出しを使用することは理にかなっていますが、ドキュメントのアウトライン全体がH1見出しから作成されると、これらの奇妙な状況につながります。

<header>
    <h1>Site heading</h1>
</header>
...
<section>
    <h1>Section heading</h1>
    <article>
        <h1>Article heading</h1>
        ...
    </article>
    ...
    <section>
        <h1>Subsection heading</h1>
        <article>
            <h1>Subsection article heading</h1>
            ...
        </article>
        ...
    </section>
</section>

これは本当にHTML5でそれを行う方法ですか？見出しタグが意味論的価値を持たなくなったような感じがします。マークアップにH1タグが表示されても、ドキュメントのアウトラインでの見出しの位置については何もわかりません。

一方、HTML5のマークアップの前と同じように見出しを階層的にマークすると、1つの記事の見出しレベルが別の記事と異なる一方で、サブセクションと同じレベルであるという状況が発生します。多くの意味。

<header>
    <h1>Site heading</h1>
</header>
...
<section>
    <h2>Section heading</h2>
    <article>
        <h3>Article heading</h3>
        ...
    </article>
    ...
    <section>
        <h3>Subsection heading</h3>
        <article>
            <h4>Subsection article heading</h4>
            ...
        </article>
        ...
    </section>
</section>

私が読んだことから、HTML5では最初の方法が正しい方法であることを理解していますが、それは正しくないと思います。単一の第3レベルの見出しのないサイト全体を持っていることは奇妙に感じることがよくありますが、それはおそらく、古い習慣が私の側で一生懸命に死んでいる場合にすぎませんか？

htmlhtml5semanticsmarkup
3
Viniter

常にセクション要素を使用している場合（必要な場合）、どの見出し要素（h1-h6）を選択してもかまいません。 アウトラインアルゴリズム は、正しい見出しランクを「計算」します。これは、セクション要素のネストに依存します。

「セマンティックが低い」わけではありません。 HTML5の見出しをh1-h6とは考えないでください。ただし、hと見なしてください（AFAIKのようなh要素はHTML5に追加されていません。下位互換性はありますが、 XHTML 2.0はこのようになりました ）。

次の2つのオプションがあります。

  • すべての場所でh1を使用します（h1の代わりに、他の見出し要素、またはそれらの組み合わせでもかまいません）。
  • HTML 4.01のように、「計算された」ランクの見出し要素を使用します。

最初のオプションの利点：

  • マークアップを調整することなく、自由に（外部ソースから）挿入したり、セクションを移動したりできます。
  • 6レベル以上 を使用できます。

2番目のオプションの利点：

  • このアウトラインアルゴリズムを実装していないユーザーエージェントをサポートします。

HTML5が推奨 作成者は2番目のオプションを使用することに注意してください。

3
unor

1つ目の方法は「正しい」ものですが、多くのスクリーンリーダーはそれをそのように解釈しないため、2つ目の方法はアクセシビリティの観点からより便利です。

セマンティクスが心配な場合は、 より一般的なHTML5 <header>要素 を使用できます。

紹介またはナビゲーション補助のグループを表します。一部の見出し要素だけでなく、ロゴ、ラップされたセクションのヘッダー、検索フォームなどの他の要素も含まれる場合があります。

例えば：

<header>
    <header>Site heading</header>
</header>
...
<section>
    <header>Section heading</header>
    <article>
        <header>Article heading</header>
        ...
    </article>
    ...
    <section>
        <header>Subsection heading</header>
        <article>
            <header>Subsection article heading</header>
            ...
        </article>
        ...
    </section>
</section>

基本的に、最初の例とほとんど同じセマンティクスを保持しますが、セクションをネストして使用すると、<header>要素にセマンティック階層が提供されます。これは、ネストした<h1>を使用してもすぐには理解できません。

次に、スタイリングについて懸念が生じます。これはpresentationの問題であり、CSSで実行できます。

header {
    font-weight: blod;
}
section > header {
    font-size:140%; /* like h1 */
}

section > section > header
    font-size:130%; /* like h2 */
}

section > section > header
    font-size:120%; /* like h3 */
}
1
user69037