sectionタグの使い方について質問です

Question

前提・実現したいこと

正しいマークアップをしたいです。

質問本題

各sectionタグには、スタートの見出しはh1からいれないといけないのでしょうか。

---

HTMLのsectionタグを使うときに、
・見出しを必ずつける
・divのかわりにはならない
・文章構成をちゃんとつくる
このルールのもと、マークアップをしているのですが、
h1を大見出しで使っているので、
次のsectionタグで、h1を使うのが不自然になってしまいます

非同期通信を導入予定で、一枚のHTMLにぜんぶ書いています。

構成的には、
ポートフォリオなので、

・メインページ
└作品見出し(の中に作品詳細)
└自分について
└フッター

というシンプルなものです

実際のHTML
bodyの中身↓

  <main>

      <div class="mainpage">

          <section class="mainvisual">
            <!-- メインビジュアル見出し -->
            <h1>見出し</h1>
            <p>言葉</p>
            <p>言葉</p>
            <p>言葉</p>
            <p>言葉</p>
          </section>
        


          <section class="works">
            <h2>Recent Works</h2>
            <div class="works-wrapper">
              <dl>
                  <dt>見出し</dt>
                  <dd>内容</dd>
                  <dd>February.2021</dd>
              </dl>
            </div>

            <div class="works-wrapper">
              <dl>
                  <dt>見出し2</dt>
                  <dd>内容</dd>
                  <dd>February.2021</dd>
              </dl>
            </div>

            <div class="works-wrapper">
              <dl>
                  <dt>見出し3</dt>
                  <dd>内容</dd>
                  <dd>February.2021</dd>
              </dl>
            </div>
          </section>


        <section class="about">
          <div class="aboutme">
            <h2>About</h2>
              <dl>
                <dt>名前</dt>
                <dd>内容</dd>
              </dl>
          </div>

          <div class="skill">
            <h3>Skill</h3>
              <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>Sass</li>
              </ul>
          </div>

            <h3>経歴</h3>
              <ul>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
              </ul>
          </div>
        </section>


        <footer>
          <p>Let's talk!</p>
          <p>Contact Me</p>
          <p>For everyone's smile</p>
        </footer>
      </div><!-- mainpage -->


      <!-- 別ページ -->
      <section claas="detail">
        <h3>別のページのタイトル</h3>
        <p>内容</p>
      </section>

  </main>

sectionタグがh3から始まっちゃたりしてるのはこれは不正解でしょうか
もうdivにしたほうがよいでしょうか。

アドバイス頂けましたら幸いです。
宜しくお願い致します。

Answer 1

ご質問の内容はよくある話で僕自身もあまり納得はできていないのですが、
つい最近まで基準が２つありました。

• sectionのhタグはh3からでもおｋ派
• sectionのhタグはh1から使うべき派

２つに分かれていた基準が今年の１月にまとまったらしく、
「特に気にせずsectionの中のhタグはh1から使っていいんだよ」
という日本語訳になっていました。

Notice how the use of section means that the author can use h1 elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.

参考URL原文より抜粋

「必ずh1から使ってね」と書いていないので、
「どちらでもいいですよ」という解釈をしたいところです。
判定する側のGoogleさんも「h1タグを複数使っても悪い影響は無いよ」とおっしゃられているので。

参考URL　HTML Living Standard — Last Updated 4 March 2021 日本語訳
https://momdo.github.io/html/sections.html#the-section-element

参考URL　HTML Living Standard — Last Updated 4 March 2021 原文
https://html.spec.whatwg.org/multipage/sections.html#sections

Comments

[nomura02]

このサイト、初めて知りました！！
ご丁寧にありがとうございます！！解決できました。