目次
1. 疑問点
- ✅ 例：「SEOに強いサイトを作るには、ただ<div>を使うだけでは不十分？」
- ✅ セマンティックHTMLとは「意味を持ったタグで構造を明確にする書き方」であることを簡単に説明
- ✅ 「検索エンジン」や「スクリーンリーダー」が意味を理解しやすくなることに触れる
2. なぜセマンティックHTMLが重要なのか？
- SEO対策：Googleは構造を理解しやすいサイトを評価（最適化）
- アクセシビリティ：視覚に頼らない人でも情報を正しく取得できる（誰もが観覧できる）
- 保守性：チームでの開発や改修で理解しやすいHTMLになる（メンテナンス性）
3. よく使うセマンティックなタグ一覧
| タグ | 使いどころ | 解説 |
| <header> | ページやセクションの先頭 | タイトルやナビを含む |
| <main> | ページのメインコンテンツ | 複数設置不可 |
| <nav> | ナビゲーション | メニューやリンク群に使用 |
| <section> | 意味のあるまとまり | 見出しとセットで使う |
| <article> | 独立したコンテンツ | ブログ記事など |
| <aside> | 補足情報 | サイドバーや関連記事など |
| <footer> | フッター情報 | 著作権、リンクなど |
- <html> や <head> などを タグ(tag) と呼びます。
- 多くのタグは、<p>～</p> のように 開始タグ(start tag) と 終了タグ(end tag) で囲みます。開始タグのタグ名の前にスラッシュ(/)をつけたものが終了タグです。開始タグを記述するときはそれに対応する終了タグも記述するのが原則ですが、終了タグを省略できるものや、終了タグの無いものがあります。
- タグ名は必ず半角文字で記述してください。大文字・小文字はどちらでも構いません。
- タグ名の前にスペースをいれてはなりません。
4. セマンティックHTMLの構造例
<html>
<body>
<header>サイトのヘッダー</header>
<nav>グローバルナビ</nav>
<main>
<article>
<h1>記事タイトル</h1>
<section>
<h2>セクション見出し</h2>
<p>内容本文</p>
</section>
</article>
<aside>関連記事や広告</aside>
</main>
<footer>著作権など</footer>
</body>
</html>
5. 非セマンティック vs セマンティックの比較
- ✅ <div class=”header”> vs <header>
- ✅ <div class=”main”> vs <main>
- ✅ → コードの可読性が上がり、CSSセレクタも直感的になる！
6. よくある誤解・注意点
- <section>は見出し（<h2>〜<h6>）と一緒に使うべき
- <article>は単なる囲いではなく、再利用や独立性があるものに
- <main>は1ページに1回のみ使用すべき など
7. おすすめの書き方
- ✅ divに頼らず、適切なタグを選ぼう
- ✅ 意味づけを意識してタグを選ぶことでSEO・アクセシビリティ両面に効果
- ✅ 実案件でも求められる“基本力”になる
8.まとめ
今後、各要素(element)についての説明や初心者の躓きポイントについても解説していきますが、とりあえずこういうものなんだなと流し読みで良いので頭に入れておいてください。
今回は初回なのでシンプルに記事を書きました。
スクールとかで習うと初っ端からすべての要素にclassをつけるよう習うかと思いますが、まずは基本からいきたいと考えています。
特にアクセシビリティの観点から見るならばdivやspanの乱用は避けましょう。読み上げ機能が困ってしまいます。（視覚障害を持つ方も困ってしまわれますので。）
HTMLを深く学びたい方は↓の書籍がオススメ。
普通に仕事してたり、スクールで習うような上辺だけでなく、歴史から一つ一つの意味までしっかりと解説してくれています。
