セマンティック HTML

100 を超える HTML 要素があり、カスタム要素を作成できるため、コンテンツをマークアップする方法は無限ですが、特に意味的な方法では他の方法より優れています。

セマンティックは「意味に関連する」という意味です。セマンティック HTML の記述とは、HTML 要素を使用して、各要素の外観ではなく意味に基づいてコンテンツを構築することを意味します。

このシリーズでは多くの HTML 要素についてまだ説明していませんが、HTML の知識がなくても、次の 2 つのコード スニペットでセマンティック マークアップがどのようにコンテンツのコンテキストを提供できるかを説明します。どちらも ipsum lorem ではなくワードカウントを使用して、スクロールの手間を省きます。想像力を働かせて「30 語」を 30 語に拡張してください。

最初のコード スニペットでは、<div> と <span>（セマンティック値を持たない 2 つの要素）を使用しています。

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

この言葉の意味はわかりますか？違います

このコードをセマンティック要素で書き換えてみましょう。

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

どのコードブロックが意味を伝えたのか？<div> と <span> の非セマンティックな要素のみでは、最初のコードブロックのコンテンツが何を表すかがわかりません。セマンティック要素を使用した 2 番目のコード例では、HTML タグに遭遇したことがなくても、コーダーが目的と意味を解読するのに十分なコンテキストが提供されます。デベロッパーが外国語のコンテンツなどを理解できなくても、ページのアウトラインを理解するのに十分なコンテキストを提供します。

2 つ目のコードブロックでは、セマンティック要素が意味と構造を提供するため、コンテンツを理解していなくてもアーキテクチャを理解できます。最初のヘッダーがサイトのバナーで、<h1> がサイト名であると考えられます。フッターはサイトのフッターです。著作権に関する文言や会社の住所を 5 語で入力します。

セマンティック マークアップは、デベロッパーがマークアップを読みやすくするためのものではなく、自動化ツールがマークアップを簡単に解読できるようにすることが目的です。デベロッパー ツールは、セマンティック要素がどのように機械判読可能な構造を提供するかも示します。

ユーザー補助オブジェクト モデル（AOM）

ブラウザは受け取ったコンテンツを解析すると、ドキュメント オブジェクト モデル（DOM）と CSS オブジェクト モデル（CSSOM）を構築します。次に、アクセシビリティ ツリーも作成します。スクリーン リーダーなどの支援デバイスは、AOM を使用してコンテンツの解析と解釈を行います。DOM はドキュメント内のすべてのノードのツリーです。AOM は、DOM のセマンティック バージョンのようなものです。

Firefox のユーザー補助パネルで、この 2 つのドキュメント構造がどのようにレンダリングされるかを比較してみましょう。

2 番目のスクリーンショットでは、2 番目のコードブロックに 4 つのランドマーク ロールがあります。「ナビゲーション」用に、<header>、<main>、<footer>、<nav> という便利なセマンティック ランドマークを使用します。ランドマークはウェブ コンテンツを構造化し、スクリーン リーダーのユーザーがコンテンツの重要なセクションをキーボードで簡単に操作できるようにします。

<header> と <footer> は、他のランドマークにネストされていない場合は、それぞれ banner と contentinfo のロールを持つランドマークです。Chrome の AOM には次のように表示されます。

Chrome デベロッパー ツールを見ると、セマンティック要素を使用した場合と使用しない場合とで、ユーザー補助オブジェクト モデルに大きな違いがあることがわかります。

セマンティック要素を使用するとアクセシビリティが向上し、非セマンティック要素を使用するとアクセシビリティが低下することは明らかです。HTML は通常、デフォルトでアクセスできます。デベロッパーとしての私たちの仕事は、デフォルトでアクセスできる HTML の性質を保護し、アクセシビリティを最大限に確保することです。デベロッパー ツールで AOM を検査できます。

role 属性

role 属性は、ドキュメントのコンテキストにおける要素の役割を示します。role 属性はグローバル属性です。つまり、このシリーズの他のほとんどすべてが定義されている WHATWG HTML 仕様ではなく、ARIA 仕様で定義されているグローバル属性です。

セマンティック要素にはそれぞれ暗黙的な役割があり、コンテキストに応じた要素もあります。Firefox のユーザー補助開発ツールのスクリーンショットを見ると、トップレベルの <header>、<main>、<footer>、<nav> はすべてランドマークであり、<main> にネストされた <header> はセクションでした。Chrome のスクリーンショットには、これらの要素の ARIA ロールが表示されます。<main> は main、<nav> は navigation、<footer> はドキュメントのフッターだったため contentinfo です。<header> がドキュメントのヘッダーの場合、デフォルトのロールは banner です。これにより、セクションがグローバル サイト ヘッダーとして定義されます。<header> または <footer> がセクション要素内でネストされている場合、それはランドマークのロールではありません。どちらのデベロッパー ツールのスクリーンショットもこれを示しています。

要素のロール名は、AOM を構築する際に重要です。要素（ロール）のセマンティクスは、支援技術にとって重要です。場合によっては検索エンジンにとっても重要です。支援技術のユーザーは、コンテンツをナビゲートし、その意味を理解するためにセマンティクスに依存しています。要素のロールを使用すると、ユーザーは探しているコンテンツにすばやくアクセスできます。さらに重要な点として、このロールは、フォーカスが置かれた後にインタラクティブな要素を操作する方法をスクリーン リーダーのユーザーに知らせます。

ボタン、リンク、範囲、チェックボックスなどのインタラクティブな要素には、すべて暗黙的なロールがあり、すべてがキーボードのタブシーケンスに自動的に追加され、デフォルトで想定されるユーザー操作サポートがあります。暗黙的なロール、または明示的な role 値により、要素固有のデフォルトのユーザー操作が行われることをユーザーに通知します。

role 属性を使用すると、タグで示されているものとは異なるロールを含む、任意の要素にロールを付与できます。たとえば、<button> には暗黙的なロール button があります。role="button" を使用すると、任意の要素を意味的にボタン（<p role="button">Click Me</p>）に変換できます。

要素に role="button" を追加すると、その要素がボタンであることをスクリーン リーダーに通知できますが、要素の外観や機能は変更されません。button 要素を使用すると、何もしなくても多くの機能を利用できます。button 要素はドキュメントのタブ順序シーケンスに自動的に追加されます。つまり、デフォルトではキーボード フォーカスが可能です。Enter キーと Space キーの両方でボタンが有効になります。ボタンには、HTMLButtonElement インターフェースによって提供されるすべてのメソッドとプロパティも含まれます。ボタンにセマンティック ボタンを使用しない場合は、これらの機能をすべてプログラムし直す必要があります。<button> を使用するだけで、とても簡単です。

非セマンティック コードブロックの AOM のスクリーンショットに戻ります。非セマンティック要素には暗黙的なロールがないことがわかります。各要素にロールを割り当てることで、非セマンティック バージョンをセマンティックにできます。

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

role 属性を使用して任意の要素にセマンティクスを追加できますが、代わりに、必要な暗黙的なロールを持つ要素を使用する必要があります。

セマンティック要素

一般的に、「マークアップのこのセクションの機能を最もよく表している要素は？」と自問することで、その職務に最適な要素を選ぶことができます。選択する要素と使用するタグは、表示するコンテンツに適したものにする必要があります。タグには意味があるからです。

HTML は、コンテンツの外観を定義するためではなく、コンテンツを構造化するために使用してください。外観は CSS の領域です。一部の要素は特定の方法で表示されるように定義されていますが、ユーザー エージェント スタイルシートでその要素がデフォルトでどのように表示されるかに基づいて要素を使用しないでください。各要素は、その要素のセマンティックな意味と機能に基づいて選択します。論理的、意味的、意味のある方法で HTML をコーディングすると、CSS を意図したとおりに適用できます。

コーディング時にジョブに適した要素を選択すれば、HTML のリファクタリングやコメントが不要になります。ジョブに適切な要素を使用することを考えた場合、ほとんどの場合、ジョブに適切な要素を選択します。そうでなければ、おそらく利用しないでしょう。各要素のセマンティクスを理解し、適切な要素の選択が重要である理由を理解していれば、通常はそれほど手間をかけずに適切な選択を行うことができます。

次のセクションでは、セマンティック要素を使用してドキュメント構造を構築します。

理解度をチェックする

セマンティック HTML に関する知識をテストします。