脱・なんとなくコーディング。プロへの第一歩「セマンティックHTML」完全ガイド

Web制作の学習、順調ですか？ デザイン通りにコーディングできると、まるでパズルのようで楽しいですよね。

そうなんです！ 正直、「全部 <div> タグで作っちゃえば見た目は整うし、これで十分じゃん」って思ってます。

おっと、その考え方は少し危険ですね。実はWebサイトを作るときは、「セマンティックHTML」というものを意識する必要があるんです。

セマンティック……？ それってどういう意味ですか？

簡単に言うと、「人間が見るための『見た目』だけでなく、コンピュータに『意味』を正しく伝える書き方」のことです。

なるほど！ それを理解できれば、私のコードも「ただ動くだけのもの」から「プロのコード」に進化できるんですね。

セマンティックHTMLとは何か？「段ボール箱」で考える

まず、「セマンティック（Semantic）」という言葉ですが、これは直訳すると「意味論的な」という意味になります。 これだけ聞くと難しく感じるかもしれませんが、要するに「そのコードが何の役割を果たしているのか、タグ自体に意味を持たせること」を指します。

これを、引越しの荷造りに例えてみましょう。

あなたが引越しをする際、荷物をすべて同じ「無地の段ボール箱」に詰めたとします。箱の外側には何も書いていません。 引越し業者が新居に荷物を運び込んだとき、どの箱をキッチンに置けばいいのか、どの箱を寝室に運べばいいのか、全くわかりませんよね。 結果として、すべての箱がリビングに山積みされ、後であなたが一つひとつ開けて確認しなければならなくなります。

HTMLにおいて、<div>タグは、この「無地の段ボール箱」と同じです。

<div>は「単なる入れ物」という意味しか持たないため、中に何が入っているのか、ブラウザや検索エンジンには伝わりません。

一方で、セマンティックHTMLを使うということは、段ボール箱にマジックで大きく「食器（キッチンへ）」「衣類（寝室へ）」と書くようなものです。

HTMLには、<header>（ヘッダー）、<footer>（フッター）、<article>（記事）、<nav>（ナビゲーション）といった、役割が名前になっているタグがたくさん用意されています。 これらを使うことで、中身を見なくても「これはナビゲーションだな」「これは記事の本文だな」と、誰が見ても（コンピュータが見ても）分かるようになるのです。

つまり、セマンティックHTMLとは、「Webサイトという家の中で、どの情報がどの部屋（役割）に属するのかを明確にするためのラベル付け」なのです。

なぜセマンティックにする必要があるのか？

見た目が同じなら、なぜわざわざタグを使い分ける必要があるのでしょうか。

これには大きく分けて3つの理由があります。これらは、あなたが「プロのWeb制作者」として評価されるために不可欠な要素です。

検索エンジン（Google）に正しく評価してもらうため

私たちがWebサイトを作るとき、多くの人に見てほしいと考えますよね。そのためにはGoogleなどの検索エンジンに、サイトの内容を正しく理解してもらう必要があります。

検索エンジンは、人間のように画面を目で見て「ここがタイトルだ」と判断しているわけではありません。彼らはプログラム（ロボット）を使って、HTMLのコードを読み取っています。

もし、ページ全体が<div>だけで作られていたら、検索エンジンのロボットは、どこが重要な記事のタイトルで、どこがただの広告なのか、区別がつきにくくなります。

しかし、適切にセマンティックなタグが使われていれば、ロボットは「<article>の中にある<h1>だから、これがこの記事の主題だな」と正確に理解できます。

結果として、検索順位の決定において、サイトの内容が正しく評価されやすくなるのです。これをSEO（検索エンジン最適化）対策と言います。

アクセシビリティの向上（誰にでも優しいサイトにする）

Webサイトを利用するのは、目が見える人だけではありません。視覚に障害がある方は、「スクリーンリーダー」という音声読み上げソフトを使ってWebサイトを閲覧しています。

このソフトは、HTMLの構造を頼りに音声を読み上げます。

例えば、ナビゲーションメニューが<nav>タグで作られていれば、スクリーンリーダーは「ナビゲーション」と読み上げ、ユーザーはそこから他のページへ飛べることがすぐに分かります。

しかし、ここがただの<div>だと、単なるテキストの羅列として読み上げられてしまい、ユーザーはページ内のどこにいるのか迷子になってしまいます。

セマンティックHTMLを書くことは、障害を持つ方や高齢者を含め、あらゆる人にとって使いやすいサイトを提供するための「思いやり」の設計なのです。

コードの管理がしやすくなる（未来の自分とチームのため）

制作現場では、一度作ったサイトを数ヶ月後、あるいは数年後に修正することがよくあります。また、自分ではなくチームの別の人が修正を担当することもあります。

そのとき、数千行にわたって<div>タグばかりが並んでいるコードを見たらどう思うでしょうか。「どこからどこまでがヘッダーなんだ？」と探すだけで一苦労です。

一方で、<header>や<main>、<footer>といったタグが使われていれば、コードをパッと見ただけで全体の構造が把握できます。「フッターの修正なら<footer>タグの中を見ればいい」とすぐに当たりがつきます。

読みやすいコードを書くことは、バグ（不具合）を減らし、作業効率を劇的に向上させます。

これだけは押さえたい！基本のセマンティックタグ

それでは、実際に頻繁に使用する代表的なセマンティックタグについて、その役割と使いどころを紹介します。これらは、家を建てる際の「柱」や「屋根」にあたる重要なパーツです。

<header>（ヘッダー）

これはサイトやセクションの「顔」となる部分です。ロゴマークやサイト全体のナビゲーション、検索フォームなどがここに入ります。

ページの一番上にある帯状の部分に使われることが多いですが、記事ごとの見出し部分に使われることもあります。

家の例えで言えば、「表札」や「玄関」にあたります。ここを見れば、どこの誰の家（サイト）なのかが分かります。

<nav>（ナビゲーション）

サイト内の他のページへのリンクや、ページ内リンクの集合体に使います。いわゆる「メニューバー」や「目次」です。

全てのリンクにこれを使う必要はありません。フッターにある小さなリンク集などには使わず、あくまで「サイト内の主要な移動手段」となる部分に使います。

家の例えで言えば、「廊下」や「案内図」です。ここを通って、ユーザーは目的の部屋（ページ）へと移動します。

<main>（メイン）

そのページの「主役」となるコンテンツを囲むタグです。1つのページにつき、基本的には1回しか使いません（厳密なルールはありますが、まずは1回と覚えておいて大丈夫です）。

ヘッダーやフッター、サイドバーを除いた、ユーザーが一番読みたいと思っている情報そのものです。

家の例えで言えば、「リビング」や「個室」など、実際に生活をする（コンテンツを消費する）メインの空間です。

<article>（アーティクル）

これは少し概念が難しいかもしれませんが、「それ単体で完結しているコンテンツ」に使います。

例えば、ブログの個別記事、ニュース記事、SNSのひとつの投稿などがこれに当たります。その部分だけを切り取って別の場所に貼り付けても、意味が通じるものが<article>です。

新聞で言えば、「一つの記事の切り抜き」です。その切り抜きだけを読んでも、誰が何をしたかというニュースの内容は伝わりますよね。

<section>（セクション）

これは、一般的な「章」や「区切り」を表します。<article>ほど独立性は高くないけれど、見出しをつけてまとまりを作りたい場合に使います。

本で言えば、「第1章」「第2章」といった区切りです。

初心者のうちは、「見出し（<h2>など）が必要なまとまりには<section>を使う」と覚えておくと良いでしょう。

<aside>（アサイド）

メインのコンテンツとは直接関係がない、補足情報や余談に使います。ブログのサイドバー（人気記事ランキングや広告）、用語の注釈などがこれに当たります。

本で言えば、「欄外のメモ」や「付録」です。なくても本編の理解には困らないけれど、あると便利な情報です。

<footer>（フッター）

そのセクションやページの「締めくくり」です。コピーライト（著作権表示）、連絡先、関連リンクなどがここに入ります。

手紙で言えば、最後の「追伸」や「署名」にあたる部分です。

百聞は一見にしかず。実際のコードで比較してみよう

ここまでは言葉と例え話で説明してきましたが、実際のHTMLコードを見比べてみると、その違いがよりはっきりと分かります。

ここでは、「ブログの個別記事ページ」を想定した、シンプルなレイアウトを例に挙げます。ブラウザで表示される見た目は、どちらも全く同じです。しかし、裏側のコード（構造）は大きく異なります。

【悪い例】すべてをdivタグで作った場合

これがいわゆる「無地の段ボール箱」だけで作られた状態です。

<div class="header">
  <h1>BloomCodeブログ</h1>
  <div class="nav">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">記事一覧</a></li>
    </ul>
  </div>
</div>

<div class="main">
  <div class="article">
    <h2>セマンティックHTMLの学習</h2>
    <p>今日はHTMLのタグについて学びました。</p>
  </div>
</div>

<div class="footer">
  <p>© 2026 BloomCode-Studio</p>
</div>

解説：

クラス名（class=”header”など）がついているので、人間が見れば役割を推測することはできます。

しかし、コンピュータ（検索エンジンや読み上げソフト）にとっては、これらはすべて等しく「意味のない箱（div）」でしかありません。

どこからどこまでが記事の本文なのか、どこがメニューなのか、機械的に判断するのは非常に困難です。

【良い例】セマンティックHTMLを使った場合

こちらが、「ラベル付きの段ボール箱」を使って整理整頓した状態です。

<header>
  <h1>BloomCodeブログ</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">記事一覧</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>セマンティックHTMLの学習</h2>
    <p>今日はHTMLのタグについて学びました。</p>
  </article>
</main>

<footer>
  <p>© 2026 BloomCode-Studio</p>
</footer>

解説：

タグそのものが変わったことに注目してください。

<div>が<header>や<nav>、<main>に置き換わっています。こうすることで、コンピュータは次のように正確に構造を理解します。

このようにコードを書くことで、検索エンジンは記事の内容を正確に読み取り、スクリーンリーダーは「ここからが記事本文です」とユーザーに案内できるようになるのです。

【保存版】役割別タグ早見表

最後に、先ほど紹介した「家の例え」と実際のタグを対応させた表を載せておきます。迷ったときのカンニングペーパーとして使ってください。

最初はすべてを完璧に使いこなす必要はありません。「まずはヘッダーとフッターだけ変えてみよう」という小さな一歩から始めてみてください。

よくある間違いと使い分けのコツ

セマンティックHTMLを学び始めると、誰もが迷うポイントがあります。特に<article>、<section>、<div>の使い分けは、プロでも議論になることがあるくらい奥が深いものです。

ここでは、初心者が迷わないためのシンプルな判断基準をお伝えします。

<div>はいつ使えばいいの？

「セマンティックHTMLを使うなら、もう<div>は使ってはいけないの？」と不安になるかもしれませんが、そんなことはありません。<div>も立派なHTMLタグであり、必要な場面がたくさんあります。

<div>を使うべき最大のタイミングは、「デザインのためだけにグループ化したいとき」です。

例えば、文字色を変えるために囲みたい、レイアウト調整のために背景色をつけたい、フレックスボックスで横並びにするための外枠が欲しい、といった場合です。

そこに「意味」はなく、単に「見た目を整えるためのグループ」が必要なときは、迷わず<div>を使ってください。 逆に、見出しを伴う文章のまとまりには<section>や<article>を検討しましょう。

<section>と<article>、どっちを使う？

これに迷ったら、「その部分だけをRSSリーダーやニュースアプリに配信したとして、意味が通じるか？」と自問してみてください。

もし、「それ単体で一つの読み物として成立する」なら<article>です。 もし、「前後の文脈がないと分からない」あるいは「単なる章立ての一部である」なら<section>です。

例えば、ブログの「トップページに並んでいる記事一覧のカード」を考えてみましょう。それぞれのカードにはタイトル、要約、日付が入っています。

これらは一つひとつが独立した記事の入り口なので、<article>で囲むのが適切です。

一方で、そのページ内にある「会社概要」というエリアはどうでしょうか。そこには「設立日」「所在地」などが書かれています。これは独立した記事というよりは、ページを構成する一つの情報の塊なので、<section>が適しています。

見出しタグ（h1〜h6）とのセット運用

<section>や<article>を使うときは、原則としてその中に見出しタグ（<h1>〜<h6>）を入れるようにしましょう。

「ここから新しい章が始まりますよ」と宣言するのが<section>で、その章のタイトルを示すのが見出しタグです。この二つはセットで使うことで、より強固な構造になります。

逆に見出しがないのに<section>を使っている場合は、もしかするとそこは<div>で十分な場所かもしれません。

まとめ

セマンティックHTMLは、単なる記号ではなく「情報を伝える手紙」です。最初はdivタグだけで作るより大変に感じるかもしれませんね

正直、「全部divの方が早いのに」って思ってました。SEOにどう関係するんですか？

適切なタグ選びは、Googleという「配送業者」への心遣いになるんです。中身が正しく伝われば、結果としてWeb集客の土台も強固になりますよ。

なるほど……検索エンジンに「中身」を正しく届けるための工夫なんですね。

ええ。その工夫は、修正しやすいコードとして「未来の自分」も助けてくれます。まずは小さな箇所から変えていきましょう！

自分のためにもなるんですね。よし、次の更新から意識して書いてみます！

まずは、今作っているサイト、あるいは過去に作ったサイトのコードを一度見直してみてください。そして、もしclass=”header”のようなクラス名をつけた<div>があったら、それを<header>タグに書き換えてみましょう。

たったそれだけの変更でも、あなたのサイトは「意味のあるサイト」へと一歩進化します。

完璧を目指す必要はありません。まずは「ヘッダー」「フッター」「ナビゲーション」の3つから、セマンティックな記述に挑戦してみてください。それが、プロのWeb制作者への確実な第一歩となります。