hタグとheaderタグの違い

html5初学者です。的外れな質問してたらすみません。

hタグとheaderタグですが、両者の使い分けがよく分からなくなりました。

hタグの方は、文書の見出し（の重要度）で
headerタグの方は、レイアウト上のヘッダー、フッターという意味で捉えたらよろしいのでしょうか？

例えば以下のような使い方で合ってますでしょうか？

関連して<h1>から使わず<h2>から使う理由は何なのでしょう？

html
1<html>
2 <head></head>
3 <body>
4   <header>
5     <p>サイトロゴとか検索用のテキストフォームとか</p>
6   </header>
7
8   <h1>商品説明</h1>
9
10   <h2>商品A</h2>
11   <p>Aの説明</p>
12
13   <h2>商品B</h2>
14   <p>Bの説明</p>
15
16   <h2>商品C</h2>
17   <p>Cの説明</p>
18
19   <footer class="footer">
20      <p>テキストとか</p>
21   </footer>
22 </body>
23</html>

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

回答2件

そういうときはリファレンスなどで定義の確認を。
<h1>–<h6>: HTML の見出し要素

それを「どう使うか」は要件とか実装のルール次第です。
現場のルールがあればそれに従う。もちろん上記のようなリファレンスで役割を理解したうえでです。

関連して<h1>から使わず<h2>から使う理由は何なのでしょう？

現場やそのプロジェクトのルール次第でしょう。
理由が１つだけとは限らないので、ここで想像することはできても「これ」ということにはなりません。

「h2から使う」とかキーワードで検索するとそれなりの解説も見つかると思うので、探してください。

投稿2020/10/24 00:25

m.ts10806

総合スコア80875

pecchan

2020/10/24 02:37

有難う御座います。すみません、先にリファレンス見るべきでした。

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

ベストアンサー

hタグとheaderタグですが、両者の使い分けがよく分からなくなりました。

役割も何も、仕様や文法など全然違います。
例えば、
headerには、divなどのだいたいの要素が中に入ることが許可されてますが、
h要素には記述要素などの、インラインレベルの要素しか許可されていません。
無理矢理入れれますが、HTMLの文法的にはアウトなので、
ブラウザや、ロボットが正しくそのHTML文章を理解できなくなるので、いろんな面でマイナスになります。