22649


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

**案1**

[code]

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

**案2**

[code]

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

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

[code]

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

**案4**

[code]

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


CC BY-SA 3.0
2016-01-29T09:03:56.620
21466
2016-02-29T05:40:57.560
7886
question
html
1ページに複数articleタグを配置する場合、articleタグ内の見出しはh1タグ開始？ それともh2タグ開始？


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

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

[code]

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

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

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

[code]

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

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

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

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


CC BY-SA 3.0
2016-02-29T03:41:35.317
22649
2016-02-29T03:41:35.317
531
21466
answer


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

[Headings and
sections](https://html.spec.whatwg.org/multipage/semantics.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を使うのは推奨されないということになります。

[code]

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

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


CC BY-SA 3.0
2016-02-29T05:40:57.560
22652
2016-02-29T05:40:57.560
3475
21466
answer