3

h1-h6見出しの使用とsectionhtml5で混乱しています。次の 2 つの例のうち、正しいのはどれですか?

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h2>Introduction</h2>
      <p> ... text ... </p>
    </section>
    <section>
      <h2>The problem itself</h2>
      <p> ... text ... </p>
    </section>
  </article>
</body>

記事をセクションに分けて、記事全体の見出し階層に従って見出しを付けることは、私には当然のことのように思えますが、

<body>
  <article>
    <header>
      <h1>Article heading</h1>
      <p><time>0/0/00</time></p>
      <div id="article-tags"></div>
    </header>
    <section>
      <h1>Introduction</h1>
      <p> ... text ... </p>
    </section>
    <section>
      <h1>The problem itself</h1>
      <p> ... text ... </p>
    </section>
  </article>
</body>

私はこれが多くの時間を費やしているのを見て、すべてのセクションに独自の見出し階層が必要であることを読みました.

2 番目の例が正しい場合、見出しをh2～ にする目的は何h6ですか? すべてh2を new で区切ることができ、section独自の見出し階層をh1再度開始する必要がある場合、それよりも低い見出しを使用する必要がありますかh1(それらはすべて見出し付きの独自のセクションを持つことができるため)。

4

2 に答える 2

6

HTML5の仕様には次のように書かれています。

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

作成者は、セクションコンテンツの1つの要素に複数の見出しを含めることによって生成される暗黙のセクションに依存するのではなく、セクションコンテンツの要素でセクションを明示的にラップすることもお勧めします。

http://www.w3.org/TR/2011/WD-html5-author-20110809/headings-and-sections.html#headings-and-sections

だから私はあなたの両方の例が良いと思います：

  • 最初の例では、それぞれ<section>に見出しの<h2>タグがあります。これは、各セクションが記事内の2番目のレベルにネストされているため適切です。
  • 2番目の例では、それぞれがタグを<section>使用しています。これは、タグがコンテンツ<h1>をセクション化するために適切です。<section>

どちらの場合も、記事のセクションを<section>タグで明示的にラップしています。

下位互換性と柔軟性のために維持されている<h2>と思います。--<h6>でHTML4スタイルのセクショニングを許可するということは、HTML5のセクショニングルールに適合するように既存のHTML4コンテンツを変更する必要がないことを意味します。また、何らかの理由で、特定の状況で古いスタイルのセクショニングを使用する方が最適な場合は、作成者が使用できることも意味します。<h2><h6>

HTMLは、世界中での汎用使用を目的としています。少しの柔軟性がそれを本当に助けます。

于 2012-12-25T12:05:03.567 に答える
1

仕様へのリンクを含むPaulD.Waiteのコメントによると、

どちらのバージョンも正しいです。2番目の例は、セクションを頻繁に移動する場合にのみ保守が容易になるため、見出しを編集する必要はありません。

于 2012-12-25T12:01:59.367 に答える