HTML入門 #4 - セマンティックHTMLを使う

入門 | 12分 で読める | 2026.07.12

公式ドキュメント
HTML

今回やること

セマンティックHTMLとは、意味に合うタグでページ構造を書くことです。

div だけで作るより、header、main、section、footerなどを使う方が、ページの役割が伝わりやすくなります。

今回は、自己紹介ページをセマンティックHTMLで整理します。

よく使う構造タグ

タグ役割
headerページやセクションの導入部分
navナビゲーション
mainページの主要コンテンツ
sectionテーマごとのまとまり
article独立して読める記事やカード
footer補足情報や連絡先

すべてを毎回使う必要はありません。ページの構造に合うものを選びます。

div だけの例

次のコードでも表示はできますが、構造の意味が読み取りにくいです。

<div>
  <div>
    <h1>自己紹介</h1>
  </div>
  <div>
    <h2>学習中のこと</h2>
    <p>HTMLとCSSを学んでいます。</p>
  </div>
  <div>
    <p>連絡先: example@example.com</p>
  </div>
</div>

div は意味を持たない汎用の箱です。必要な場面では便利ですが、最初から全部を div にする必要はありません。

セマンティックHTMLで書く

同じ内容を意味のあるタグで書き直します。

<body>
  <header>
    <h1>自己紹介</h1>
    <p>Web制作を学んでいる高校生です。</p>
  </header>

  <nav aria-label="ページ内メニュー">
    <a href="#learning">学習中のこと</a>
    <a href="#goal">目標</a>
  </nav>

  <main>
    <section id="learning">
      <h2>学習中のこと</h2>
      <p>HTML、CSS、JavaScriptを順番に学んでいます。</p>
    </section>

    <section id="goal">
      <h2>目標</h2>
      <p>自分で作ったWebアプリを公開することです。</p>
    </section>
  </main>

  <footer>
    <p>連絡先: example@example.com</p>
  </footer>
</body>

表示は大きく変わらなくても、HTMLの意味は明確になります。

見出しの順番を守る

セマンティックHTMLでは、見出しの順番も重要です。

よい例:

<h1>自己紹介</h1>
<h2>学習中のこと</h2>
<h2>目標</h2>

避けたい例:

<h1>自己紹介</h1>
<h4>学習中のこと</h4>
<h2>目標</h2>

文字サイズを変えるために見出しレベルを飛ばすのは避けます。見た目はCSSで調整します。

よくあるミス

ミス問題修正
main が複数ある主要コンテンツが曖昧基本は1ページに1つ
nav に関係ないリンクを入れるナビゲーションの意味が崩れるメニュー用リンクだけにする
見出しレベルを飛ばす構造が読み取りにくいh1 から順に使う
何でも section にするまとまりの意味が薄くなる見出しを付けられる単位で使う

練習

前回までの自己紹介ページを、次の構造に直してください。

  1. ページ上部を header
  2. メイン内容を main
  3. 「学習中のこと」「目標」を section
  4. 連絡先を footer

次のステップ

CSS入門 #1 - 色・文字・余白を変える で、HTMLに見た目を加えます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR