Frontend Academy · レッスン

セマンティックHTML5: セマンティック要素とdivだらけの構造

Q: 「セマンティックHTML5: セマンティック要素とdivだらけの構造」で何を学びますか？

意味を持たないラッパーdivをセマンティック要素に置き換え、文書アウトラインアルゴリズムと見出し階層を理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

意味を持たないラッパーdivをセマンティック要素に置き換え、文書アウトラインアルゴリズムと見出し階層を理解します。

「セマンティックHTML5: セマンティック要素とdivだらけの構造」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Div soup — 問題点

Div soupとは、<div>と<span>だけで構成されたページです。構造を伝えるにはクラス名が必要で、それらのクラスがなければスクリーンリーダーには理解できず、検索エンジンにも意味が伝わりません。

<!-- Div soup (avoid) -->
<div class="container">
  <div class="header">
    <div class="logo">...</div>
    <div class="nav">...</div>
  </div>
  <div class="content">...</div>
  <div class="footer">...</div>
</div>

セマンティックな代替手段

意味のないdivを、目的を伝えるセマンティック要素に置き換えます。これにより構造が自己説明的になり、CSSがなくても理解できます。

<!-- Semantic HTML (preferred) -->
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Brand"></a>
    <nav>...</nav>
  </header>
  <main>...</main>
  <footer>...</footer>
</body>

ドキュメントアウトラインアルゴリズム

見出し要素（h1-h6）はドキュメントのアウトラインを作成します。スクリーンリーダーの利用者は見出しを使って移動します。支援技術はアウトラインのレベルを読み上げます。階層を論理的に保ちます。ページタイトルにはh1、主要なセクションにはh2、サブセクションにはh3を使います。

<time> — 機械可読の日付

<time>要素は、機械可読なdatetime属性を使って日付と時刻をマークアップします。検索エンジンはイベントの日付を理解でき、スクリーンリーダーは書式設定された日付を読み上げられます。

<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time>

<address>

<address>要素は、直近のarticleまたはドキュメントに関する連絡先情報を囲みます。郵便住所である必要はなく、メールアドレス、電話番号、ソーシャルメディアのハンドルも含まれます。

<address>
  <a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
  <a href="https://twitter.com/coddykit">@coddykit</a>
</address>

<figure>と<figcaption>

<figure>は、画像、グラフ、コード例、動画などの自己完結したコンテンツを囲みます。<figcaption>は、figureと意味的に関連付けられたキャプションを提供します。

<figure>
  <img src="chart.png" alt="Monthly active users 2025">
  <figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure>

<blockquote>と<cite>

<blockquote>は長い引用を示します。出典URLにはcite属性を使います。<cite>要素は、書籍、記事、映画などの創作物のタイトルを示します。

<blockquote cite="https://developer.mozilla.org">
  <p>HTML is the standard markup language for creating web pages.</p>
  <footer>—<cite>MDN Web Docs</cite></footer>
</blockquote>

<details>と<summary>

<details>と<summary>の組み合わせは、JavaScriptなしでネイティブのアコーディオン／開閉ウィジェットを作成します。ブラウザーが開閉、キーボード操作、アクセシビリティを自動的に処理します。

<details>
  <summary>What is the refund policy?</summary>
  <p>We offer a 30-day money-back guarantee on all plans.</p>
</details>

<mark> — ハイライトされたテキスト

<mark>は、検索結果の一致箇所のように、参照用にハイライトされたテキストを表します。CSSでテキストを黄色く装飾することとは意味が異なります。

<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p>

<abbr> — 略語

略語や頭字語は<abbr>で囲み、完全な用語をtitle属性に指定します。スクリーンリーダーやブラウザーは、ホバー時にユーザーへ展開形を提示します。

<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>

<div>と<span>を使う場面

どちらも現在でも役立ちます。<div>は、意味を持たない汎用ブロックラッパーに適しています。たとえばレイアウト用コンテナや、Reactのコンポーネントルートなどです。<span>は、意味を持たないインラインスタイル用フックに使います。

確認問題

JavaScriptなしでネイティブの折りたたみ可能な開閉ウィジェットを作成するHTML要素はどれですか？

まとめ：セマンティックHTML5

div soupをセマンティック要素に置き換えます。header、nav、main、article、section、aside、footerを使います。日付にはtime、メディアにはfigure/figcaption、アコーディオンにはdetails/summary、ハイライトにはmarkを使います。意味を持たないレイアウト用コンテナにはdivとspanを使います。

よくある質問