はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
見出しタグ（h1 ~ h6）のルール
見出しタグは、文字の大きさを変えるためのものではありません。文章の「見出し」を作り、構造を定義するためのものです。これには、守べき重要なルールが3つあります。
1.<h1> はページの「タイトル」。原則1つだけ
<h1> は、そのページに最も重要な大見出しです。1ページに1つだけ使うのが基本です。
2.見出しレベルは順番を守り、飛ばさない
見出しは必ず h1 → h2 → h3 → ... のように、順番に使う必要があります。
3.見た目のためではなく、構造のために使う
「この文字は少しだけ大きくしたいから h3 を使おう」というのは間違いです。見た目の調整はすべて CSS の役割です。HTML では、純粋に文章の構造だけを考えます。
作成したコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FE1000Outputs 0003</title>
</head>
<body>
<header>
<!-- h1タグを記事のタイトルに使いたいため、divタグに変更 -->
<div>
<a href="/">
<img src="img/logo.png" alt="FE1000Outputs">
</a>
</div>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>朝活を始めるメリット</h1>
<section>
<h2>体へのメリット</h2>
<h3>代謝が上がる</h3>
<p>ここに本文が入ります。</p>
<h3>体重管理がしやすい</h3>
<p>ここに本文が入ります。</p>
</section>
<section>
<h2>心へのメリット</h2>
<h3>ストレスが減る</h3>
<p>ここに本文が入ります。</p>
<h3>集中力が高まる</h3>
<p>ここに本文が入ります。</p>
</section>
<aside>
<h2>関連記事</h2>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
<li><a href="#">関連記事3</a></li>
</ul>
</aside>
</article>
</main>
<footer>
<p>Copyright 2025</p>
<p>FE1000Outputs</p>
</footer>
</body>
</html>
思考：<section>は「意味のあるまとまり」
今回、<h2> タグごとに、<section> タグで囲んでいたが、<h3> タグごとに囲む必要はなかったのか？ということが頭をよぎったので、メモレベルで思考をまとめておきます。
<section> タグの役割は、テーマをもったコンテンツのまとまりを明示することになります。言い換えると、「ここからここまでが、一つの章ですよ」と印をつけるようなものです。
<h2>体へのメリット</h2> から始まるブロックは、それ自体で「体へのメリット」という一つの完結したテーマを持っ織、これはまさに「章」なので、<section> タグで囲むのは適切であると考えられます。
<section>
<h2>体へのメリット</h2>
<h3>代謝が上がる</h3>
<p>...</p>
<h3>体重管理がしやすい</h3>
<p>...</p>
</section>
それでは、<h3> タグごとに <section> タグは必要でしょうか？
この方法は、HTML のルール上は間違いではありません。
しかし、「代謝が上がる」という <h3> タグで囲まれた部分は、「体へのメリット」という大きな章の中の単なる一つの項目に過ぎません。これを独立した「章」とみなすのは、少し細かすぎるような気がします。
過度に <section> タグを使うと、かえって構造が複雑になり、「どこが大きな区切りなのか」が分かりにくくなってしまう可能性があります。
判断するための指針として、次のようなことを自問自答することにしてみようと思います。
「この見出しで始まる部分は、他の部分から切り離しても、独立した文章ブロックとして意味をなすか？」
上の例に当てはめてみます。
-
<h2>体へのメリット</h2>のまとまりは、独立した文章ブロックとして意味をなすので、<section>を使う。 -
<h3>代謝が上がる</h3>のまとまりは、「体へのメリット」という文脈があって初めて意味をなすので、<section>は不要。