セマンティックHTMLの実際のコード例

セマンティックHTMLとは、タグ本来の「意味」に沿ってページをマークアップすることです。
SEO・アクセシビリティ・保守性の向上につながるため、Web制作では必須の考え方となっています。

この記事では、「div」タグで実装されてしまうことの多い「section」「nav」「main」「aside」の正しい使い方を、コード例を交えて解説します。

1.sectionタグの正しい使い方

1-1.「見出しのある独立したコンテンツブロック」に使う

section は何となく使われがちですが、実は明確な使い方があります。

section を使うべき条件
Google公式も述べている通り、見出し（h2/h3 など）が付く “意味のあるまとまり” のときだけ section を使うというルールがあります。
● 使うべき例

• 会社概要
• 料金プラン
• サービス紹介
• よくある質問
• NEWS一覧

いずれも見出しが存在し、内容として独立しているブロックです。

1-2.正しい例（見出しあり）

<section>
  <h2>サービス紹介</h2>
  <p>当社が提供しているサービスについてご案内します。</p>
</section>

1-3.間違った例（見た目のためだけに section を使う）

<section class="wrapper">
  <div class="inner">
    <p>ただの装飾目的のブロック</p>
  </div>
</section>

装飾目的なら div が正しい。

2.navタグの正しい使い方

2-1.「ページ内の主要なナビゲーション」にのみ使う

nav は「リンク集」であれば何でも使えるわけではありません。
nav を使うべき例

• グローバルナビ（ヘッダー）
• フッターの主要リンク
• サイドバーのメインメニュー
• パンくずリスト（breadcrumb）

2-2.正しい例

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service">サービス</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

2-3.nav を使うべきではない例

• ボタンの並び
• ページ内の単なるリンク
• SNSアイコンの列（補助目的のリンク）

<!-- SNSリンクのみのブロックは nav にしない -->
<div class="sns-links">
  <a href="#">Twitter</a>
  <a href="#">Instagram</a>
</div>

ページの主要ナビゲーションではないため、nav の意味を持たない。

3.mainタグの正しい使い方

3-1.ページの「主役となるコンテンツ」を囲む

main は ページ内で一回しか使えない 重要なタグです。
main を使うべき部分

• 記事本文
• 商品詳細エリア
• サービス説明エリア
• LP のメインコンテンツ

3-2.正しい例：

<main>
  <h1>会社概要</h1>
  <p>当社の企業情報をご紹介します。</p>

  <section>
    <h2>沿革</h2>
    <p>当社の歴史をご紹介します。</p>
  </section>
</main>

3-3.main に入れてはいけないもの

• header
• footer
• サイドバー（aside）
• 重複するナビゲーション

4.asideタグの正しい使い方

4-1.「補足情報」「サブ情報」に使用する

aside は「メインではない補足的なコンテンツ」を表します。
使うべき例

• サイドバー
• 広告ブロック
• 関連記事
• プロフィール（メイン記事とは独立した補足情報）

4-2.正しい例：

<aside>
  <h2>関連記事</h2>
  <ul>
    <li><a href="#">HTMLの基本構造</a></li>
    <li><a href="#">SEOに強いマークアップ</a></li>
  </ul>
</aside>

まとめ

セマンティックHTMLは、タグの意味を理解して適切に使うことが最も大切です。
正しくマークアップすることで、SEOやアクセシビリティ、コードの保守性が大幅に向上します。