5

1ページに複数articleタグを配置する場合
・articleタグ内の見出しはh1タグ開始? それともh2タグ開始?

案1

<h1>ページの見出し</h1>
<article>
  <h2></h2>
</article>
<article>
  <h2></h2>
</article>

案2

<h1>ページの見出し</h1>
<article>
  <h1></h1>
</article>
<article>
  <h1></h1>
</article>

また、この時、それぞれページにh1以外のhタグを配置しても良い?
案3

<h1>ページの見出し</h1>
<h2>ページの中見出し</h2>
<h3>ページの小見出し</h3>
<article>
  <h2></h2>
</article>
<article>
  <h2></h2>
</article>

案4

<h1>ページの見出し</h1>
<h2>ページの中見出し</h2>
<h3>ページの小見出し</h3>
<article>
  <h1></h1>
</article>
<article>
  <h1></h1>
</article>

2 件の回答 2

1

考えられうるパターンを出して「どれが正解?」と決められる話ではなくて、要素の意味を理解して「正しくセマンティックを表現する」という観点で考えたほうが答えに近づくかと思います。

article要素の定義としては「article要素の中を取り出した際に単独でそれがコンテンツとして成り立つかどうか」ということになります。つまり、案1は違和感があります。article要素内を取り出した際に、h2がいきなり来ているので「あれ?レベル1の見出しなしで、いきなりh2?」となってしまうからです。つまり、案1が、

<body>
  <h1>ページの見出し</h1>
  <article>
    <h2></h2>
  </article>
</body>

だったとすると、これは好ましくないかな、と。この範囲であれば、案2が適していると思います。

ただし、では「article要素内ではh1が必ず来る」と言い切ることはできないです。なぜなら、以下のように、article要素はネストすることがあるからです。

<body>
  <h1>ページの見出し</h1>
  <article>
    <h1></h1>
    <article>
      <h2></h2>
    </article>
  </article>
</body>

上記の場合は、子article要素は、親article要素に「関連した内容」になっている必要があるので、見出しについてもその関連性が反映された状態で設置される、つまり子article要素にh2がいきなり来ることも許容できる、という考え方になるかと思います。

案3、案4については、さっきの定義通りにarticle要素が使われていれば、その外で見出しがどう使われていようが、あまり関係はないかと思います。

ここではarticle要素だけでしたが、本来であれば、article要素の中でheader要素やsection要素を使うことの方が多い(セマンティックを表現しようとすると自然と使いたくなる気がします)と思うので、その場合は、h1-6の見出しはarticle要素ではなくsection要素やheader要素内で使われることになると思います。

1

どれも間違ってはいません。HTML規格に記述があります。

Headings and sections

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

以下のようにarticle要素でランクが1つしか上がってないのに、h3を使うのは推奨されないということになります。

<h1>ページの見出し</h1>
<article>
  <h3>...</h3>

規格ではなく個人的な意見ですが、articleなどのセクショニング要素を使うのならh1のみを使うほうがHTML5らしいかなと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。