Skip to content

10. HTML のセマンティクス

HTML のセマンティクスとは、ウェブページの構造と意味を明確にするために HTML タグを使用することです。セマンティックな HTML を使うことにより、検索エンジンやスクリーンリーダーなどの支援技術がコンテンツを正確に理解しやすくなります。また、後からコードを読む開発者も論理的な構造を理解しやすくなります。

10.1 セマンティクスの重要性

セマンティクスは、以下のような理由で重要です：

  • 検索エンジン最適化 (SEO): 検索エンジンはセマンティックなマークアップを理解しやすくなり、適切なインデックスを付けることができます。
  • アクセシビリティ: スクリーンリーダーや他の支援技術がページ内容を解釈しやすくなります。
  • メンテナンス性: セマンティックな HTML はコードの可読性を高め、他の開発者が理解しやすくなります。

10.2 基本的なセマンティック要素

HTML5 では、以下のようなセマンティック要素が導入されています。これらの要素を使うことで、コンテンツの構造と意味をより明確に伝えることができます。

10.2.1 <header>

<header> 要素は、あるセクションまたはページ全体のヘッダー部分を表します。タイトルやナビゲーションリンクを含むことが一般的です。

<header>
  <h1>ウェブサイトのタイトル</h1>
  <nav>
    <ul>
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">アバウト</a></li>
      <li><a href="#contact">コンタクト</a></li>
    </ul>
  </nav>
</header>

10.2.2 <nav>

<nav> 要素は、ナビゲーションリンクの集合を表します。サイト全体の主要なナビゲーションメニューに使用されます。

<nav>
  <ul>
    <li><a href="#home">ホーム</a></li>
    <li><a href="#services">サービス</a></li>
    <li><a href="#contact">コンタクト</a></li>
  </ul>
</nav>

10.2.3 <main>

<main> 要素は、ドキュメントの主要なコンテンツ部分を示します。通常、1 つの HTML 文書には 1 つの <main> 要素しか含まれません。

<main>
  <article>
    <h2>記事のタイトル</h2>
    <p>これは主な内容部分です。</p>
  </article>
</main>

10.2.4 <article>

<article> 要素は、独立したコンテンツの一単位を表します。ブログ記事やニュース記事に最適です。

<article>
  <h2>記事のタイトル</h2>
  <p>この記事の内容です。</p>
</article>

10.2.5 <section>

<section> 要素は、テーマに沿った一つのセクションを表します。例えば、異なるトピックを含むページでそれぞれのトピックを <section> で分けることができます。

<section>
  <h2>セクションのタイトル</h2>
  <p>このセクションの内容です。</p>
</section>

10.2.6 <aside>

<aside> 要素は、主要コンテンツとは別の補足コンテンツを示します。サイドバーや付随情報に使われます。

<aside>
  <h3>関連記事</h3>
  <ul>
    <li><a href="#article1">記事1</a></li>
    <li><a href="#article2">記事2</a></li>
  </ul>
</aside>

<footer> 要素は、セクションまたはページ全体のフッター部分を示します。著作権情報や関連リンクが含まれることが一般的です。

<footer>
  <p>&copy; 2023 ウェブサイトの名称. All rights reserved.</p>
</footer>

10.3 セマンティックな HTML を使った例題

以下にセマンティックな HTML を使用した簡単なウェブページの例を示します。このページには、ヘッダー、ナビゲーション、主要コンテンツ、サイドバー、フッターが含まれます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>セマンティックHTMLの例</title>
  </head>
  <body>
    <header>
      <h1>セマンティックHTMLのウェブサイト</h1>
      <nav>
        <ul>
          <li><a href="#home">ホーム</a></li>
          <li><a href="#about">アバウト</a></li>
          <li><a href="#services">サービス</a></li>
          <li><a href="#contact">コンタクト</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>この記事のタイトル</h2>
        <p>この記事の主要な内容です。</p>
      </article>
    </main>
    <aside>
      <h3>関連記事</h3>
      <ul>
        <li><a href="#related1">関連1</a></li>
        <li><a href="#related2">関連2</a></li>
      </ul>
    </aside>
    <footer>
      <p>&copy; 2023 ウェブサイトの名称. All rights reserved.</p>
    </footer>
  </body>
</html>

10.4 練習問題

問題 1

以下の非セマンティックな HTML をセマンティックな HTML に書き換えてください。

<div id="header">
  <h1>サイトのタイトル</h1>
  <div id="nav">
    <a href="#home">ホーム</a>
    <a href="#about">アバウト</a>
  </div>
</div>
<div id="content">
  <h2>記事のタイトル</h2>
  <p>記事の内容です。</p>
</div>
<div id="footer">
  <p>&copy; 2023 会社名. All rights reserved.</p>
</div>

問題 2

以下の HTML コードにはセマンティクスが欠けています。正しいタグを用いてセマンティクスを改善してください。

<div>
  <h1>ページのタイトル</h1>
  <p>ページの内容です。</p>
</div>
<div>
  <h3>サイドバーのタイトル</h3>
  <p>サイドバーの内容です。</p>
</div>
<div>
  <p>フッターの内容です。</p>
</div>

以上で「HTML のセマンティクス」のセクションは終了です。