html5 article sectionにおけるh1の位置について

色々調べて明確な回答が得られなかったので…

articleやsectionの扱いで

<article>
　　<h1>見出し</h1>
　　　　<section>
　　　　　　<h1>見出し<h1>
　　　　　　<p>説明</p>
　　　　</section>
</article>

こんな感じにマークアップするのはわかるのですが

<article>
　　<p>神奈川県</p>
　　<h1>店舗一覧</h1>
　　　　<section>
　　　　　　<p>横浜市中区</p>
　　　　　　<h1>港の見える丘カフェ<h1>
　　　　　　<p>港の見える丘公園が見渡せるカフェです</p>
　　　　</section>
　　　　<section>
　　　　　　<span>横浜市西区</span>
　　　　　　<h1>ランドマークカフェ<h1>
　　　　　　<p>ランドマークタワー内にあるカフェです</p>
　　　　</section>
　　　　<section>
　　　　　　<div><img src="#"></div>
　　　　　　<p><span>横浜市南区</span></p>
　　　　　　<h1>大岡公園カフェ<h1>
　　　　　　<p>大岡公園内にあるカフェです</p>
　　　　</section>
</article>

のようにマークアップすることは認められているのでしょうか。
article、sectionのh1は直下でないといけないのか
上記のようにarticle、sectionとh1の間にpタグやspanやdivなどを入れてもOKで
article、sectionのどこでもh1が内包されていれば良い解釈で良いのか、ご教授いただければと思います。

行動規範の内容に同意します

回答3件

文法的には問題なし。

でもテキストの意味を考えれば、普通は

html
1<h1>神奈川県</h1>
2<h2>店舗一覧</h2>
3...
4<h1>横浜市中区</h1>
5<h2>港の見える丘カフェ</h2>

じゃないですか？

投稿2018/04/24 08:35

KojiDoi

総合スコア13671

hirolyn

2018/04/24 09:08

テキストの意味と検索キーワードの優先度でいつも悩んでしまいますが質問内容の例題では納得のご回答です。ありがとうございました！

行動規範の内容に同意します

構造上は、問題ないです。
位置については、h1の前にpやdiv、spanなどはあっても問題ないですが、h2やh3がh1の前にあったら、明らかにおかしいでしょう。
コンテンツの中で一番主張したい見出しがh1になっていれば良いです。

ただ、そもそものh1の使い方として気になったところが。
h1は、一応ページ内に複数OKですが、ページにつき一つの方が望ましいです。
（いろんな考えがある中、私が一番共感できる記事というだけですが）
https://qiita.com/itagakishintaro/items/1884df99d3e074b106f5

例えばこのコンテンツだと、「店舗一覧」が一番メインの見出しだと思いますので、
私だったら「港の見える丘カフェ」「ランドマークカフェ」「大岡公園カフェ」はh2にします。

備考
あくまで例だとは思いますが、「店舗一覧」のところ以外、<h1>が閉じられていなかったり、imgにaltがなかったりとか、ソースの不備がみられます。

投稿2018/04/24 08:34

kszk311

総合スコア3404

hirolyn

2018/04/24 09:08

たしかに従来の構造を用いながらマークアップした方が良いですね。ソースのご指摘もありがとうございます！

行動規範の内容に同意します

ベストアンサー

articleもsectionもどちらがどちらを内包しなくてはいけない、というものではありません。
ただ意味合いが違うだけです。

さらに見出しタグは設置する位置は関係なく、順序立てて並んでいることが重要です。
h1より前にh2が来ないようにする、などですが、これについてarticleやsectionの概念が重要になります。
例えば、

hmtl
1<article>
2　　<h1>神奈川県</h1>
3　　<h2>店舗一覧</h2>
4　　　　<section>
5　　　　　　<h1>港の見える丘カフェ<h1>
6　　　　　　<h2>特徴１<h2>
7　　　　　　<h3>いい景色<h3>
8　　　　　　<p>港が見える</p>
9　　　　　　<h2>特徴2<h2>
10　　　　　　<p>コーヒーが飲める</p>
11　　　　</section>
12
13　　<h2>オススメ店舗一覧</h2>
14　　　　<section>
15.
16.
17.
18