HTML入門 - 見出しは大きさではなく階層

見出しの数字はまとまりの深さ

h1 はページ全体、h2 はその中の章です。同じ深さのまとまりには同じ数字を使います。

さらに細かいまとまりが必要なときだけ、その中を h3 に分けます。

名前の下に並ぶ3つのまとまりは同じ深さなので、3つとも h2 で書きます。

<h1>山田 太郎</h1>
<h2>自己紹介</h2>
<h2>趣味</h2>
<h2>経歴</h2>

1 / 4

見出しを拾うと構造が見える

見出しの階層は、ブラウザや検索エンジンがページの構造を理解する手がかりになります。

見出しから見たページの構造

囲った h1 がページ全体、その下の h2 が同じ深さの3つの章です。

これは見出しから構造を確認する表です。画面に目次が自動で表示されるという意味ではありません。

2 / 4

考えてみよう外しても進めます

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

見出しは画面を壊さずに間違えられるので、見た目ではなく階層を確認します。

書いたことどうなるか

h1 を何個も置く

ページ全体の名前が複数になる

文字の大きさで h4 を選ぶ

まとまりの深さと見た目がずれる

h2 を飛ばして h3 にする

親のない下位まとまりになる

この回は見出しの骨組みだけです。本文は次のレッスンで埋めます。

4 / 4