Day 1・HTMLの構造 — 骨組みを読む

セマンティックHTML — 意味で名付けるタグ

header や main など「意味を持つタグ」を知り、AI生成HTMLの各ブロックが何の役割かを名前から読み取る。

ページは大きく「ヘッダー」「本文」「サイドの情報」「フッター」などのかたまりに分かれます。これらのかたまりを、意味の伝わる名前のタグで囲むのが(セマンティックHTML)です。セマンティックとは「意味のある」という意味。中身が同じでも、役割がわかる名前を付けよう、という考え方です。

たとえるなら

引っ越しのダンボールに例えます。全部の箱に「もの」とだけ書いてあったら、開けるまで中身がわかりません。でも「食器」「本」「冬服」と書いてあれば一目瞭然。セマンティックHTMLは、箱にちゃんと役割名を書くことです。

HTML

<header>ロゴとメニュー</header>
<main>
  <section>サービス紹介</section>
  <section>お客様の声</section>
</main>
<footer>会社情報</footer>

役割名のタグで囲むと、読むだけでページの地図が浮かぶ。

上のHTMLは、中身のテキストを読まなくても「上にヘッダー、まん中に本文が2セクション、下にフッター」という構成が名前だけでわかります。これがセマンティックHTMLの威力です。AIが作ったページも、まずこの役割タグだけを拾い読みすれば、全体の間取り図がつかめます。

意味のない div だらけ

div は「ただの箱」で役割名がない。どれがヘッダーで本文か、中を読まないとわからない。

HTML

<div>
  <div>ロゴ</div>
  <div>本文</div>
</div>

役割名で囲む

同じ見た目でも、名前で役割が伝わる。人にもAIにも検索エンジンにも読みやすい。

HTML

<div>
  <header>ロゴ</header>
  <main>本文</main>
</div>

なぜ div ではなくセマンティックタグを使うのか

div は見た目こそ同じでも、役割の情報がゼロです。役割名のタグを使うと、画面読み上げソフトが「ここはナビ」「ここが本文」と利用者に伝えられ、(使いやすさ)が上がります。検索エンジンもページ構造を理解しやすくなります。意味は飾りではなく機能です。

div がすべて悪いわけではない

ぴったりの役割タグがないとき、見た目のグループ分けのために div を使うのは正常です。悪いのは「役割タグがあるのに全部 div にする」こと。AIも状況に応じて両方を使います。div を見ても慌てないでください。

AIにはこう頼む

全部 div のHTMLを渡されたら「意味が伝わるように、適切な箇所を header / main / section / footer などのセマンティックタグに置き換えて」と頼めます。見た目を変えずに構造だけ整えてもらえます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

そのページの主役となる本文を囲むのに最も適したタグはどれですか。

セマンティックHTMLを使う利点として正しくないものはどれですか。

セマンティックHTMLとは何か、なぜ div ばかりより良いのかを説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。