HTMLでページを作れるようになると、
次のような疑問が出てきます。
・とりあえず div で囲っていけば動く
・見た目は問題ないけど、これで正しいのか不安
・なぜ header や footer を使う必要があるのか
この疑問に答えるのが、
セマンティックHTML（Semantic HTML） という考え方です。
この記事では、
セマンティックHTMLとは何か
なぜ正しい構造を書く必要があるのか
を、初心者向けに整理して解説します。
この記事で学べること
・セマンティックHTMLの意味
・セマンティックでないHTMLとの違い
・よく使うセマンティックタグ
・正しい構造を書くメリット
セマンティックHTMLとは何か
セマンティックHTMLとは、
「見た目」ではなく「意味」でHTMLを書く考え方です。
HTMLタグには、それぞれ
「これは見出し」
「これはナビゲーション」
「これは本文」
といった意味があります。
その意味を正しく使って構造を作ることを、
セマンティックHTMLと呼びます。
セマンティックでないHTMLの例
HTMLを書き始めたばかりの頃は、
次のような構造になりがちです。
・すべて div で囲む
・クラス名だけで役割を表現する
・HTMLを見ても構造が分かりにくい
見た目はCSSで整えれば問題ありませんが、
HTML自体が何を表しているのか分かりにくい
という問題があります。
セマンティックHTMLの例
セマンティックHTMLでは、
要素の役割に応じたタグを使います。
・ページのヘッダー → header
・ナビゲーション → nav
・メインコンテンツ → main
・セクション → section
・フッター → footer
HTMLを見るだけで、
ページ構造が把握できる状態を目指します。
よく使うセマンティックタグ一覧
ここでは、
特によく使われるセマンティックタグを整理します。
header
ページやセクションの
導入部分を表します。
使いどころ
・サイトロゴ
・ページタイトル
・ヘッダー内の要素
nav
ナビゲーションを表します。
使いどころ
・グローバルメニュー
・ページ内リンク一覧
すべてのリンクを nav に入れる必要はありません。
「ナビゲーションとしての役割」を持つ部分に使います。
main
ページの
主なコンテンツ部分を表します。
原則
・1ページに1つ
・ページの中心となる内容
section
意味のある
ひとまとまりの内容を表します。
使いどころ
・章
・トピックごとの区切り
section の中には、
見出しを含めるのが基本です。
article
独立して成立するコンテンツを表します。
使いどころ
・ブログ記事
・ニュース記事
・カード型コンテンツ
「この部分だけ切り出しても意味が通じるか」
が判断基準になります。
footer
ページやセクションの
補足情報を表します。
使いどころ
・著作権表記
・関連リンク
・補足情報
なぜセマンティックHTMLが重要なのか
「divでも動くのに、
なぜわざわざタグを使い分けるのか」
と感じるかもしれません。
理由は、大きく3つあります。
理由① SEOに強くなる
検索エンジンは、
HTML構造を解析して
ページ内容を理解しています。
セマンティックHTMLを書くことで、
・どこが本文か
・どこがナビゲーションか
を正しく伝えられ、
SEO評価が安定しやすくなります。
理由② コードが読みやすくなる
セマンティックタグを使うと、
HTMLを見るだけで構造が分かります。
・自分が後から見返したとき
・他人がコードを読むとき
どちらの場合でも、
理解しやすいコードになります。
理由③ CSS・JavaScriptが書きやすくなる
構造が整理されていると、
・CSSの指定範囲が明確になる
・JavaScriptで要素を取得しやすくなる
結果として、
修正や追加がしやすくなります。
セマンティックHTMLとdivの関係
ここで重要なのは、
divが不要になるわけではない という点です。
考え方としては、
・意味がある → セマンティックタグ
・意味がない / レイアウト用 → div
という使い分けになります。
すべてをセマンティックタグで書こうとせず、
適材適所で使うことが大切です。
初心者が意識すべきポイント
最初から完璧を目指す必要はありません。
まずは次の点を意識してください。
・header / main / footer を使う
・ナビゲーションは nav にする
・意味のあるまとまりは section にする
これだけでも、
HTMLの質は大きく向上します。
まとめ
セマンティックHTMLは、
正しい構造でWebページを書くための考え方です。
・見た目ではなく意味でタグを選ぶ
・HTMLだけで構造が伝わる
・SEO・保守性・可読性が向上する
この考え方を身につけることで、
「とりあえず動くHTML」から
「正しく書かれたHTML」 へとレベルアップできます。
次は、
ユーザー入力を扱うためのHTMLフォーム
について学んでいきましょう。
次に読むべき記事
▶ 次の記事
3-6 フォームの基本構造とinputタグの使い方
▶ 関連記事
3-4 HTMLでよく使うタグ一覧と基本的な使い方
コメント