セマンティックHTMLとは？初心者向けに解説

セマンティックHTMLとは、HTMLタグを見た目ではなく意味に合わせて使う書き方です。

たとえば、ページの見出しには<h1>、ナビゲーションには<nav>、記事本文には<article>、補足情報には<aside>を使います。

HTMLは、ただ画面に文字や画像を表示するだけのものではありません。

ページのどこが見出しなのか、どこが本文なのか、どこがナビゲーションなのかを、ブラウザや検索エンジン、支援技術に伝える役割もあります。

この記事では、セマンティックHTMLの意味、よく使うタグ、通常の<div>との違い、実際のページ構成例を初心者向けに解説します。

セマンティックHTMLとは
セマンティックHTMLを使う理由
divとの違い
よく使うセマンティックHTMLタグ
見出しタグも意味に合わせて使う
セマンティックHTMLのページ構成例
悪い例と良い例
sectionとarticleの使い分け
セマンティックHTMLでよくあるミス
CSSを書くときの考え方
まとめ

セマンティックHTMLとは

セマンティックHTMLとは、HTMLタグの意味に合わせてページを作ることです。

英語のsemanticには、「意味の」という意味があります。

つまり、セマンティックHTMLは「意味のあるHTML」と考えると分かりやすいです。

たとえば、次のようなHTMLがあります。

<div class="title">HTMLの基本</div>
<div class="menu">メニュー</div>
<div class="content">本文</div>

このコードでも、CSSを使えば画面上の見た目は作れます。

しかし、HTMLタグだけを見ると、どれが見出しで、どれがナビゲーションで、どれが本文なのか分かりにくくなります。

セマンティックHTMLでは、次のように意味に合ったタグを使います。

<h1>HTMLの基本</h1>

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">このサイトについて</a></li>
  </ul>
</nav>

<main>
  <p>本文</p>
</main>

このように書くと、HTMLの構造からページの意味が分かりやすくなります。

セマンティックHTMLを使う理由

セマンティックHTMLを使う理由は、ページの構造を分かりやすくするためです。

意味に合ったタグを使うことで、次のようなメリットがあります。

コードを読んだときに構造が分かりやすい
検索エンジンにページの内容を伝えやすい
スクリーンリーダーなどの支援技術に伝わりやすい
チーム開発で他の人が理解しやすい
CSSやJavaScriptで扱うときにも整理しやすい

HTMLをすべて<div>で作ることもできます。

しかし、<div>だけでは、その部分にどのような意味があるのかHTML上では伝わりません。

見出し、本文、メニュー、補足情報、フッターなど、役割がある部分には、できるだけ意味に合ったタグを使います。

divとの違い

<div>は、特別な意味を持たない汎用的なタグです。

レイアウトを分けたり、CSSを当てるための囲みとしてよく使います。

<div class="box">
  <p>内容</p>
</div>

一方で、<header>、<nav>、<main>、<article>、<section>、<footer>などは、それぞれ意味を持っています。

タグ	意味
`<div>`	特別な意味を持たない汎用的な囲み
`<header>`	ページやセクションのヘッダー
`<nav>`	主要なナビゲーション
`<main>`	ページの主要な内容
`<article>`	独立した記事や投稿
`<section>`	意味のあるまとまり
`<aside>`	補足情報やサイドバー
`<footer>`	ページやセクションのフッター

意味のある部分にはセマンティックなタグを使い、特に意味を持たせない囲みには<div>を使います。

よく使うセマンティックHTMLタグ

ここからは、よく使うセマンティックHTMLタグを確認します。

headerタグ

<header>は、ページやセクションのヘッダー部分に使います。

サイト名、ロゴ、メニュー、ページタイトルなどを入れることがあります。

<header>
  <h1>Webプログラマーになるための独学ガイド</h1>

  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/category/html/">HTML</a></li>
      <li><a href="/category/javascript/">JavaScript</a></li>
    </ul>
  </nav>
</header>

<header>はページ全体の先頭だけでなく、記事やセクションの先頭にも使えます。

navタグ

<nav>は、ナビゲーションを表すタグです。

サイト内の主要なメニュー、カテゴリ一覧、ページ内リンクなどに使います。

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">このサイトについて</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
  </ul>
</nav>

すべてのリンクを<nav>で囲む必要はありません。

主要なナビゲーションに使うタグです。

mainタグ

<main>は、ページの中心となる内容を表すタグです。

そのページで一番重要な本文部分を囲みます。

<main>
  <h1>セマンティックHTMLとは</h1>

  <p>セマンティックHTMLは、意味に合わせてHTMLタグを使う書き方です。</p>
</main>

<main>は、1ページに1つだけ使うのが基本です。

ヘッダー、フッター、サイドバー、ナビゲーションなど、全ページ共通の部分ではなく、そのページ固有の内容を入れます。

articleタグ

<article>は、独立した記事や投稿を表すタグです。

ブログ記事、ニュース記事、商品レビュー、コメント、カード型の記事一覧などに使われます。

<article>
  <h2>HTMLフォームの作り方</h2>
  <p>HTMLフォームでは、inputやtextareaを使って入力欄を作ります。</p>
</article>

その部分だけを取り出しても、1つの内容として成立する場合は<article>が向いています。

sectionタグ

<section>は、意味のあるまとまりを表すタグです。

ページ内の章や、テーマごとのまとまりに使います。

<section>
  <h2>HTMLの基本</h2>
  <p>HTMLは、Webページの構造を作るための言語です。</p>
</section>

<section>
  <h2>CSSの基本</h2>
  <p>CSSは、Webページの見た目を整えるための言語です。</p>
</section>

<section>を使う場合は、見出しを入れると構造が分かりやすくなります。

単にCSSを当てるためだけの囲みなら、<section>ではなく<div>を使います。

asideタグ

<aside>は、本文とは少し離れた補足情報を表すタグです。

サイドバー、関連記事、プロフィール、広告枠、補足説明などに使われることがあります。

<aside>
  <h2>関連記事</h2>
  <ul>
    <li><a href="/html-form/">HTMLフォームの作り方</a></li>
    <li><a href="/css-flexbox/">CSS Flexboxの使い方</a></li>
  </ul>
</aside>

本文の主役ではないけれど、関連する情報を入れる場所です。

footerタグ

<footer>は、ページやセクションの下部情報を表すタグです。

著作権表示、サイト情報、関連リンク、記事の補足情報などに使います。

<footer>
  <p>© 2026 Webプログラマーになるための独学ガイド</p>
</footer>

<footer>はページ全体の最後だけでなく、記事ごとの下部にも使えます。

見出しタグも意味に合わせて使う

セマンティックHTMLでは、<h1>から<h6>までの見出しタグも重要です。

見出しタグは、文字を大きくするためだけのタグではありません。

ページの構造を表すために使います。

<h1>セマンティックHTMLとは</h1>

<h2>セマンティックHTMLを使う理由</h2>

<h2>よく使うタグ</h2>

<h3>headerタグ</h3>
<h3>navタグ</h3>
<h3>mainタグ</h3>

<h1>はページ全体の大きなタイトルに使います。

<h2>は大きな章、<h3>はその中の小さな項目に使います。

見た目を大きくしたいだけなら、CSSで調整します。

セマンティックHTMLのページ構成例

セマンティックHTMLでシンプルなブログ記事ページを作ると、次のような構成になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>セマンティックHTMLの練習</title>
</head>
<body>

  <header>
    <p>Webプログラマーになるための独学ガイド</p>

    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/html/">HTML</a></li>
        <li><a href="/css/">CSS</a></li>
        <li><a href="/javascript/">JavaScript</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>セマンティックHTMLとは</h1>
        <p>HTMLタグを意味に合わせて使う書き方です。</p>
      </header>

      <section>
        <h2>セマンティックHTMLを使う理由</h2>
        <p>ページの構造を分かりやすくするためです。</p>
      </section>

      <section>
        <h2>よく使うタグ</h2>
        <p>header、nav、main、article、section、aside、footerなどがあります。</p>
      </section>
    </article>
  </main>

  <aside>
    <h2>関連記事</h2>
    <ul>
      <li><a href="/html-form/">HTMLフォームの作り方</a></li>
      <li><a href="/css-flexbox/">CSS Flexboxの使い方</a></li>
    </ul>
  </aside>

  <footer>
    <p>© 2026 Webプログラマーになるための独学ガイド</p>
  </footer>

</body>
</html>

この構成では、ページ上部は<header>、ナビゲーションは<nav>、本文は<main>、記事は<article>、補足情報は<aside>、下部情報は<footer>で表しています。

タグを見ただけで、ページの構造が分かりやすくなります。

悪い例と良い例

セマンティックHTMLでは、見た目だけでタグを選ばないことが大切です。

たとえば、次のように<div>だけでページを作ると、構造が分かりにくくなります。

<div class="header">
  <div class="title">サイト名</div>
  <div class="menu">
    <a href="/">ホーム</a>
    <a href="/about/">このサイトについて</a>
  </div>
</div>

<div class="main">
  <div class="article">
    <div class="heading">記事タイトル</div>
    <div class="text">記事本文です。</div>
  </div>
</div>

<div class="footer">
  <div>コピーライト</div>
</div>

セマンティックHTMLを使うと、次のように書けます。

<header>
  <p>サイト名</p>

  <nav>
    <a href="/">ホーム</a>
    <a href="/about/">このサイトについて</a>
  </nav>
</header>

<main>
  <article>
    <h1>記事タイトル</h1>
    <p>記事本文です。</p>
  </article>
</main>

<footer>
  <p>コピーライト</p>
</footer>

見た目はCSSで同じようにできます。

違いは、HTMLの意味が分かりやすくなることです。

sectionとarticleの使い分け

<section>と<article>は、使い分けで迷いやすいタグです。

<article>は、それだけで独立した内容として成り立つものに使います。

ブログ記事、ニュース記事、レビュー、コメント、投稿カードなどです。

<article>
  <h2>CSS Flexboxの使い方</h2>
  <p>Flexboxを使うと、横並びレイアウトを作りやすくなります。</p>
</article>

<section>は、ページや記事の中の意味のあるまとまりに使います。

<article>
  <h1>CSS Flexboxの使い方</h1>

  <section>
    <h2>Flexboxとは</h2>
    <p>横並びや中央寄せに使えるCSSのレイアウト機能です。</p>
  </section>

  <section>
    <h2>基本の書き方</h2>
    <p>親要素にdisplay: flexを指定します。</p>
  </section>
</article>

記事全体は<article>、記事の中の章は<section>と考えると分かりやすいです。

セマンティックHTMLでよくあるミス

セマンティックHTMLでよくあるミスは、見た目だけでタグを選ぶことです。

文字を大きくしたいから<h1>を使う、余白を作りたいから<section>を使う、という使い方は避けます。

見た目はCSSで調整します。

<h1>大きくしたいだけの文字</h1>

大きく見せたいだけなら、次のようにクラスを使ってCSSで調整します。

<p class="large-text">大きく見せたい文字</p>

もう一つ多いのは、意味のないまとまりに<section>を使うことです。

<section class="box">
  <p>ただの囲みです。</p>
</section>

ただのレイアウト用の囲みなら、<div>で問題ありません。

<div class="box">
  <p>ただの囲みです。</p>
</div>

タグを選ぶときは、「この部分にはどんな意味があるか」を考えます。

CSSを書くときの考え方

セマンティックHTMLを使っても、見た目はCSSで自由に調整できます。

たとえば、<header>や<nav>にもCSSを指定できます。

header {
  padding: 20px;
  background-color: #f5f5f5;
}

nav ul {
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 0;
}

main {
  max-width: 800px;
  margin: 0 auto;
}

article {
  line-height: 1.8;
}

セマンティックHTMLは、見た目を制限するものではありません。

HTMLでは意味を表し、CSSで見た目を整えるという分担です。

まとめ

セマンティックHTMLとは、HTMLタグを意味に合わせて使う書き方です。

見出しには<h1>や<h2>、ナビゲーションには<nav>、本文には<main>、記事には<article>、補足情報には<aside>を使います。

よく使うセマンティックHTMLタグは次の通りです。

タグ	意味
`<header>`	ページやセクションのヘッダー
`<nav>`	主要なナビゲーション
`<main>`	ページの主要な内容
`<article>`	独立した記事や投稿
`<section>`	意味のあるまとまり
`<aside>`	補足情報やサイドバー
`<footer>`	ページやセクションのフッター