✅セマンティックHTMLの重要性
セマンティックHTMLとは、HTMLの構造に適切な意味を持たせてコーディングすることを指します。
セマンティックHTMLを使うことで、以下のようなメリットがあります：
- コードの可読性と保守性の向上
- SEO対策の強化
-
アクセシビリティ（利用しやすさ）の改善
✅セマンティックHTMLの重要なタグ一覧
文書全体の構造・セクション系
| タグ |
意味・用途 |
| <html> |
HTML文書のルート（全体） |
| <head> |
メタ情報、スタイル、スクリプトなどを含む部分 |
| <body> |
ページの内容本体 |
| <header> |
セクションやページのヘッダー部分 |
| <footer> |
セクションやページのフッター部分 |
| <main> |
文書の主たる内容（1ページに1つだけ） |
| <section> |
意味のあるセクション・章のようなまとまり |
| <article> |
独立した内容（ブログ記事、ニュースなど） |
| <aside> |
関連情報・補足情報（サイドバーなど） |
| <nav> |
ナビゲーションリンクのまとまり |
テキスト・コンテンツ系
| タグ |
意味・用途 |
| <h1>〜<h6> |
見出し（数字が小さいほど重要な見出し） |
| <p> |
段落（paragraph） |
| <blockquote> |
引用 |
| <cite> |
出典、引用元など |
| <abbr> |
略語（省略語に意味を与える） |
| <address> |
連絡先情報（企業情報、著者情報など） |
| <pre> |
整形済みテキスト（コード表示など） |
| <code> |
プログラムコード |
| <strong> |
強調（論理的な強調、SEO的にも重要） |
| <em> |
強調（感情的・文脈的な強調） |
| <mark> |
ハイライト・強調表示 |
| <time> |
日時、時間の意味付け |
| <small> |
補足・注意書きなどの小さな文字(コピーライトなど) |
リスト・グループ系
| タグ |
意味・用途 |
| <ul> |
順序なしリスト（unordered list） |
| <ol> |
順序ありリスト（ordered list） |
| <li> |
リスト項目 |
| <dl> |
定義リスト（description list） |
| <dt> |
用語（definition term） |
| <dd> |
定義（definition description） |
テーブル系（ややセマンティック）
| タグ |
意味・用途 |
| <table> |
テーブル（表） |
| <thead> |
テーブルのヘッダー部分 |
| <tbody> |
テーブルの本体部分 |
| <tfoot> |
テーブルのフッター部分 |
| <tr> |
テーブルの行 |
| <th> |
ヘッダーセル（列見出しなど） |
| <td> |
データセル（テーブルの中身） |
| <caption> |
テーブルのタイトル |
補足：セマンティックではないが、よく比較されるタグ
| タグ |
備考 |
| <div> |
意味を持たない汎用コンテナ（非セマンティック） |
| <span> |
意味を持たないインライン要素（非セマンティック） |
| <iframe> |
外部コンテンツを埋め込むための非セマンティック要素（title属性が必要） |
✅非セマンティックの<div>の活用法
<div>と<section>の比較
非セマンティックの<div>と一番対比されやすいタグは、「構造的な区切り」に使われ、意味を持つセマンティックタグである<section>だと思います。
| 比較項目 |
<div> |
<section> |
| 意味（セマンティクス） |
なし（ただの箱） |
意味がある（まとまった内容） |
| 目的 |
スタイルやスクリプト用のグループ化 |
意味のあるセクションの定義 |
| 検索エンジン最適化（SEO） |
弱い |
強い（意味づけされるため） |
| アクセシビリティ（A11y） |
弱い（補助技術が理解しづらい） |
強い（スクリーンリーダーが理解しやすい） |
| スクリーンリーダーでの扱い |
単なるコンテナとして読み飛ばされることも |
「セクション」などとして読み上げられる |
いつ<div>を使うのか
- 意味を持たない装飾・スタイル用のグループ化だけしたいとき（例：グリッドやFlexboxのためのラッパー）
- 明確にセマンティックタグが合わない、または細かく分けたくないケース
補足：用語
アクセシビリティとは
アクセシビリティとは、すべての人が、状況や能力にかかわらず、平等にウェブを利用できるようにすることです。
アクセシビリティが支援する人たちの例:
| 状況・人 |
支援内容 |
| 👨🦯 視覚障害（全盲） |
スクリーンリーダーで読み上げる。意味ある構造が重要。 |
| 👓 弱視・色覚障害 |
コントラスト、文字サイズ、色に依存しない表現が重要。 |
| 🧏♀️ 聴覚障害 |
音声・動画には字幕やテキスト代替が必要。 |
| ♿ 運動障害（キーボードしか使えない人など） |
マウスなしで操作できる設計（フォーカス順・Tab移動） |
| 🧠 認知障害 |
シンプルで分かりやすい構造、明確なラベルが助けになる。 |
| 📱 モバイルユーザー |
小さい画面・片手操作などにも配慮が必要。 |
| 🚶 一時的な障害（例：手が怪我中） |
音声操作や片手ナビゲーションが有効。 |
| 👴 高齢者 |
小さな文字が読みにくい、操作が複雑すぎない配慮が必要。 |
参考
Discussion