Webページは「中身（内容）」だけでなく、
“どんな意味をもつ部分なのか” を明確にする構造 がとても重要です。
そのときに使われるのが セマンティックタグ（semantic: 意味的な）。
SEO（検索評価）にも関わり、
画面リーダー（アクセシビリティ）にも大きく関係します。
この記事では、
- セマンティックタグとは何か
- よく使うタグ一覧
- 正しいページ構造の作り方
- 実際のコード例
を初心者にもわかりやすく解説します。
セマンティックタグとは？
セマンティックタグとは 「この部分にはこういう意味がありますよ」 と
ブラウザ・検索エンジンに伝えるためのタグのことです。
例：
| 部分 | タグ |
|---|---|
| ページ上部（ヘッダー） | <header> |
| ナビゲーション | <nav> |
| メインコンテンツ | <main> |
| 記事（1つのまとまり） | <article> |
| セクション（章） | <section> |
| 補足情報 | <aside> |
| ページ下部（フッター） | <footer> |
これらを適切に使うことで、
ページは 「意味のある構造」 になります。
セマンティックタグを使うメリット
① SEOに有利（検索エンジンに伝わりやすい）
Googleはページ構造を理解して内容を評価します。
セマンティックタグを使うことで、
- どこがメインの記事か
- どこがナビゲーションか
- どこが重要なコンテンツか
などがきちんと伝わります。
② アクセシビリティが良くなる
画面リーダーや読み上げソフトが、
より正確にページの意味を理解できます。
③ コードが読みやすく、保守しやすい
<div >だらけのコードより圧倒的に読みやすくなります。
<div>は便利で、困ったら使える要素ではありますが、使いすぎると要素のブロックごとの意味
がごちゃごちゃしますね。
よく使うセマンティックタグ一覧＋用途
1. <header>（ヘッダー）
ページの上部、ロゴやタイトル、メニューなどを置く部分。
<header>
<h1>RyoPro Pocket</h1>
</header>2. <nav>（ナビゲーション）
ページ移動リンクをまとめる場所。
<nav>
<ul>
<li><a href="/html">HTML</a></li>
<li><a href="/css">CSS</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>3. <main>（ページの主役）
そのページで最も重要なコンテンツ部分。
※ ページに 1つだけ使うのが正解！
<main>
<h2>HTMLの基本</h2>
<p>ここに記事本文が入ります。</p>
</main>4. <section>（章・区切り）
記事の中の「まとまり（セクション）」を表す。
<section>
<h2>見出しタイトル</h2>
<p>内容がここに入ります。</p>
</section>5. <article>（独立したコンテンツ）
ブログ記事・ニュース記事・コメント、
それ単体で意味が成立する内容 に使う。
<article>
<h2>Java入門：クラスとは？</h2>
<p>クラスはオブジェクトの設計図です…</p>
</article>6. <aside>（補足情報）
サイドバー・関連記事・広告などの補足部分。
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="#">Java 基本文法</a></li>
</ul>
</aside>7. <footer>（フッター）
ページの一番下にある著作権表示・リンクなど。
<footer>
<p>© 2025 RyoPro Pocket</p>
</footer>セマンティックタグを使った正しいページ構造
実際の構造はこんなイメージです👇
<header> ページ上部（ロゴ、タイトル）
<nav> ナビゲーション
<main> メインコンテンツ（1ページ1つ）
<article> 1つの記事
<section> セクション（章分け）
<section> セクション（章分け）
</article>
<aside> 補足情報（サイドバーなど）
<footer> ページ下部ここで改めて伝えておきますが、これらはhtmlのbody要素の中に記載します。
実際に「ブログ記事ページ」を作ってみよう
あなたのブログをイメージした構造例です。
<header>
<h1>RyoPro Pocket</h1>
</header>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/html">HTML入門</a></li>
<li><a href="/css">CSS入門</a></li>
</ul>
</nav>
<main>
<article>
<h2>HTML入門⑥：セマンティックタグとは？</h2>
<section>
<h3>セマンティックタグとは？</h3>
<p>これはページ構造に意味を持たせるタグです…</p>
</section>
<section>
<h3>よく使うタグ一覧</h3>
<p>header, nav, main, footer など…</p>
</section>
</article>
</main>
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="#">HTML入門⑤：フォーム要素</a></li>
<li><a href="#">CSS入門⑦：セレクタの基礎</a></li>
</ul>
</aside>
<footer>
<p>© 2025 RyoPro Pocket</p>
</footer>CSSを使っていないので、デザインは味気ないものです。
ですが基本の大事な部分なのでまずはしっかり覚えていきましょう！
セマンティックタグを使うときの注意点
① mainは1ページに1つだけ
→ 複数使うのはNG
② sectionには必ず見出し（h2/h3など）を書く
→ 意味を明確にするため
③ 何でもかんでも section にしない
→ 「意味のあるまとまり」にだけ使う
④ <div> は悪ではない
→ 特に意味が無いまとまりのときは div が正解（装飾用など）
まとめ：セマンティックタグは“意味のあるHTML”を作る基礎
この記事で紹介したタグを正しく使うことで、
- 読みやすい
- 保守しやすい
- SEOに強い
- アクセシブル（誰でも使いやすい）
こんな Web ページを作れるようになります。
次回からは皆さんも期待のCSS編に入ります。
自分の好きなようにデザインができるフェーズに入るので、工作やイラスト感覚で楽しんでやっていきましょう！
ではでは！次回！：HTML/CSS入門⑦：セレクタ・色・背景を基礎から理解しよう！
コメント