セマンティックHTML設計テンプレ

Posted on by

「とりあえずdiv」から卒業するための実務フレーム

HTMLは「見た目を作る言語」ではありません。

本質は、

意味を設計する言語

です。

しかし実務では、

  • とりあえず <div>
  • とりあえず <section>
  • とりあえず <article>

となりがち。

そこで今回は、

迷わず設計できるセマンティックHTMLテンプレ
を体系化します。

まず前提：設計は上から考える

HTMLは「外側 → 内側」の順で設計します。

① ページ構造

② メインコンテンツ

③ セクション分割

④ 独立コンテンツ

⑤ 補足情報

この順番で考えれば迷いません。

基本テンプレ（汎用サイト）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
</head>
<body>  <header>
    <h1>サイト名</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>  <main>    <section>
      <h2>ヒーローエリア</h2>
    </section>    <section>
      <h2>サービス紹介</h2>      <article>
        <h3>サービスA</h3>
        <p>説明文</p>
      </article>      <article>
        <h3>サービスB</h3>
        <p>説明文</p>
      </article>
    </section>    <aside>
      <h2>関連情報</h2>
    </aside>  </main>  <footer>
    <address>
      株式会社〇〇<br>
      info@example.com
    </address>
  </footer></body>
</html>

各要素の役割

<header>

  • ページまたはセクションの導入部
  • ナビやロゴを含む

<main>

  • そのページ固有のメインコンテンツ
  • ページに1つだけ

<section>

  • テーマごとの区切り
  • 見出しが必要

<article>

  • 単体で完結するコンテンツ
  • 再利用可能

<aside>

  • 補足情報
  • サイドバー
  • 関連記事
  • 広告など

<footer>

  • ページやセクションの締め

設計の判断フロー

迷ったらこの順で考えます：

  1. これはページ全体か？ → <main>
  2. 独立して配信できる？ → <article>
  3. テーマの区切り？ → <section>
  4. 補足情報？ → <aside>
  5. ただのレイアウト？ → <div>

ブログ記事用テンプレ

<main>  <article>    <header>
      <h1>記事タイトル</h1>
      <p>公開日</p>
    </header>    <section>
      <h2>見出し1</h2>
      <p>本文</p>
    </section>    <section>
      <h2>見出し2</h2>
      <p>本文</p>
    </section>    <footer>
      <address>
        著者：山田 太郎
      </address>
    </footer>  </article></main>

これが最も自然な構造です。

LP（ランディングページ）テンプレ

<main>  <section>
    <h1>キャッチコピー</h1>
  </section>  <section>
    <h2>課題提示</h2>
  </section>  <section>
    <h2>解決策</h2>
  </section>  <section>
    <h2>料金</h2>
  </section>  <section>
    <h2>お問い合わせ</h2>
  </section></main>

LPは基本的に「章構造」。

よくあるNG設計

div地獄

<div class="wrap">
  <div class="inner">
    <div class="box">

意味がありません。

見出しなし section

<section> は見出しが前提。

なんでも article

独立性がなければ使わない。

なぜこれが重要？

正しく設計すると：

  • SEOが安定
  • スクリーンリーダーが理解しやすい
  • アウトラインが整理される
  • チーム開発で読みやすい
  • 保守が楽

実務での黄金ルール

① 見た目ではなく意味で考える

② レイアウトはCSSに任せる

③ セクションには必ず見出し

④ articleは独立コンテンツのみ

⑤ divは最後の手段

超簡易チェックリスト

  • mainは1つ？
  • 見出し階層は飛んでいない？
  • sectionに見出しある？
  • articleは独立している？
  • addressの使い方は正しい？

まとめ

セマンティックHTML設計とは、

見た目を作ることではなく
意味を設計すること

です。

テンプレを持つだけで、

長期運用が楽になる

コードの質が上がる

SEOが安定する

アクセシビリティが向上する