Sectionタグのhタグについて

Question

Sectionタグですが、使い道がイマイチ理解出来ておりません。
必ず子要素にhタグが必要なのでしょうか。
下記のように、孫要素？にhを配置する事は不可でしょうか？

目的は、エラーチェックではなくSEO対策として、
下記コードはルールに法っているか、違反しているかの質問です。

<section class="contents-wrapper">
  <div class="inner-wrapper">
　　<h1> sectionタグとは？<h1>
     <p>sectionタグは、章・節・項を表すセクションです。</p>
     <p>＜section＞＜/section＞で範囲を囲みます。</p>
  </div>
</section>

上記が不可の場合、下記のようにhの空タグを入れる事は可でしょうか？

<section class="contents-wrapper">
  <h6></h6>
  <div class="inner-wrapper">
　　<h1> sectionタグとは？<h1>
     <p>sectionタグは、章・節・項を表すセクションです。</p>
     <p>＜section＞＜/section＞で範囲を囲みます。</p>
  </div>
</section>

何卒宜しくお願い致します。

Comments

[m.ts10806]

構文的にOKかどうかなら構文チェックをかければ良い話ですけど(ネット上に無料サービスがあります)、どういう前提なのでしょうか。オンライン学習でしょうか。

[Nobu_Nobuta]

SEO対策を前提として、でお願い致します。
仰る通り、構文チェックではエラーは無いと思います。
（私がチェックした限りではエラー検出はされませんでした。）

只今、ポートフォリオ作成中なのですが、極力 ルールに沿ったコードを描きたいと思っております。

[m.ts10806]

質問に追記してください

[m.ts10806]

また「SEO」タグを追加願います

[Nobu_Nobuta]

ご指導ありがとうございます。
質問文追加、SEOタグ追加しました。

Answer 1

<section>: 汎用セクション要素 - HTML: HyperText Markup Language | MDN

<section>－HTML5タグリファレンス

セクションを明確にしよう | HTML 入門 | レッスン | CreatorQuest

上記などに解説があるので読み込んで、Sectionタグ意味を理解しましょう。
そうすれば、適切な使い道が分かるでしょう。

とりあえず私の理解は、
Sectionは、文章の意味のあるまとまり、ということです。
章・節・項 も意味のあるまとまりですよね。

意味のあるまとまりなら、タイトルを付けることができるはずです。できないとしたら、sectionで囲むのは適切でない可能性が高いということです。

上記のリンクを読むと、タイトル(h要素)は必須ではないので、構文エラーにはならないですが、意味的には適切でないと思います。

すくなくとも、<h6></h6>という空タグは不適切だと思います。
また、h1の上位階層に、下位であるh6を入れるのも不適切です。

Comments

[Nobu_Nobuta]

資料添付、見解のご説明ありがとうございます。
CSSのデザイン上、Sectionの下にdivをつけたかったのですが、適切でない可能性が高いとのいう事で、classを２つつけるか、sectionをdivに変える事で対処しようかと思います。