HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

プロジェクトでセマンティックHTMLを使う方法：初心者向け入門ガイド

Web開発者にとって、スクリーンリーダーを利用するユーザーも含めて、あらゆる人がサイトの情報を正しく読み取れるようにすることは重要な課題です。HTMLには「セマンティック（意味的）な要素」が用意されており、これを活用することでアクセシビリティの高いマークアップを実現できます。本記事では、Web開発でよく使われる代表的なセマンティック要素について解説します。

セマンティックHTMLとは

「セマンティックHTML」を理解するには、「セマンティクス（意味論）」という言葉の定義から始めるのが分かりやすいでしょう。Merriam-Webster辞書によれば、セマンティクスとは「意味の研究、あるいは記号が持つ意味」を指します。つまり、セマンティックHTMLを書くということは、タグの意味が明確に伝わるHTMLコードを作成することだと言えます。

セマンティックなマークアップを使うのは、Webページの構造を標準的な方法で記述するためです。これにより、スクリーンリーダーや音声アシスタントがHTML要素を読み取り、ユーザーの要求に応じて関連する情報を返せるようになります。

主なセマンティック要素

2014年にHTML5仕様が公開された際、Webページの構造をより明確に示すためのセマンティック要素が数多く追加されました。ここでは、セマンティックタグとみなされる代表的なタグを紹介します。

<header>

<header>は、セクション単位の意味を持つコンテナ要素として機能します。通常はサイトのロゴ、<nav>、そしてサイト自体を表す<h1>などを含みます。多くの場合、この内容はサイト内のすべてのページで共通になります。

<nav>

<nav>はナビゲーション要素の略称で、ユーザーをサイト内の他のページへ誘導するリンクを格納します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプルサイト</title>
</head>
<body>
  <header>
    <div class="logo-container">
      <img src="logo.png" alt="プレースホルダー画像"/>
      <h1>Kit Kat Logo</h1>
    </div>
    <nav class="navigation-links-container">
      <a href="about-us.html">会社概要</a>
      <a href="contact-us.html">お問い合わせ</a>
      <a href="services.html">サービス</a>
      <a href="login.html">ログイン／登録</a>
    </nav>
  </header>
</body>
</html>

ナビゲーション要素には、リンクやメニュー、サブメニューを含めることができます。ただし、<nav>の中に別の<nav>を入れ子にすることはできません。上記の例では、ロゴのプレースホルダーとして<img>を配置し、アンカー（<a>）要素を含む<nav>を用意しています。これらはすべて<header>の中に入れ子になっています。

<main>、<section>、<h2>～<h6>

<main>タグは、最初の<header>以外の部分、すなわちサイトの主要なコンテンツを示します。その中には<section>タグを配置でき、各セクションは独自の<header>や<h2>～<h6>の見出し要素を持つことができます。

見出しタグの基本的なルールとして、ページ内の<h1>は必ず1つだけにし、その内容はページのタイトルと一致させます。また、番号の大きい見出し（例：h4）は、それより小さい番号の見出し（h3、h2）を使わずに使用してはいけません。一方で、大きい番号から小さい番号へ戻ること（例：h4の後でh3に戻る）は許容されます。これは、Webページのあるべき階層構造に沿った考え方です。

<main>
  <header>
    <h2>メインコンテンツの目的を示すh2</h2>
  </header>

  <section>
    <header>
      <h3>セクションの内容を説明するh3</h3>
    </header>
    <div>h3に関連するコンテンツ</div>
    <h4>さらに下位の見出しh4</h4>
    <div>h4に関連するコンテンツ</div>
  </section>

  <section>
    <header>
      <h3>h4を使った後でも、上位のh3に戻ることができる</h3>
    </header>
    <div>h3に関連するコンテンツ</div>
    <h4>h6を使う前に、まずh4とh5が必要</h4>
    <div>h4に関連するコンテンツ</div>
    <h5>続いてh5を使用</h5>
    <div>h5に関連するコンテンツ</div>
    <h6>これでようやくh6が使える！</h6>
  </section>
</main>

見出しタグは技術的には順序を無視して使うこともできますが、それはベストプラクティスではありません。適切な階層構造を保つことで、アクセシビリティが向上します。

まとめ

セマンティックHTMLの活用方法は非常に多彩です。公式ドキュメントはMDN Web DocsやW3Cのサイトで公開されており、意図が分かりやすいその他のタグについても両方のサイトで確認できます。ドキュメントの調べ方を身につけておくことは、開発者にとって大きな武器になります。ブラウザなどのHTMLプロセッサはセマンティクスを利用して、必要に応じてユーザーに追加の階層情報を提供してくれるのです。

  1. HTMLのコンピュータコード用要素とは？kbd・pre・code・var・sampの使い方を解説

    Webページ上にコンピュータのコードやプログラム関連のテキストを表示するために、HTMLにはいくつかの専用要素が用意されています。この記事では、代表的な以下の5つの要素について、サンプルコードと出力結果をもとにひとつずつわかりやすく解説します。 <kbd>：キーボード入力 <pre>：整形済みテキスト <code>：プログラムコード <var>：数式の変数 <samp>：プログラムの出力例 HTMLの<kbd>要素（キーボード入力） <kbd>タグは、キーボードからの入力を表すための要素です。ユーザーにキー

  2. HTMLのブロック要素とインライン要素の違いをわかりやすく解説

    はじめにHTMLの要素は、その表示方法によって「ブロック要素」と「インライン要素」の2種類に大きく分けられます。この2つの違いを理解することは、Webページのレイアウトを思い通りに組むための第一歩です。本記事では、それぞれの特徴と具体的なコード例を使って、わかりやすく解説します。ブロック要素（Block Elements）とはブロック要素は、前後に改行が入ったかのように表示される要素です。また、親要素の利用可能な幅いっぱいまで占めるという特徴があります。代表的なブロック要素には以下のようなものがあります。<h1>〜<h6>（見出し）<p>（段落）<ar