見出しとセクション

前のセクションでは、ページ上の単語の意味がわからなくても、セマンティック要素がドキュメントに意味のある構造を提供すると、検索エンジン、支援技術、将来のメンテナー、新しいチームメンバーなど、他のユーザーがドキュメントの概要を理解できることを学びました。

このセクションでは、ドキュメント構造について説明します。前のセクションのセクション要素を復習し、アプリケーションのアウトラインをマークアップします。

コーディング時に適切な要素を選択すれば、HTML をリファクタリングしたりコメントアウトしたりする必要がなくなります。ジョブに適した要素を使用することを考えれば、ほとんどの場合、ジョブに適した要素を選択できます。そうしなければ、おそらく何も得られないでしょう。

マークアップのセマンティクスを理解し、適切な要素を選択することが重要である理由を認識したら、さまざまな要素について学習することで、一般的には、追加の労力をかけずに適切な要素を選択できるようになります。

サイト <header>

まず、サイトヘッダーを作成する必要があります。非セマンティック マークアップから始めて、適切なソリューションに移行することで、HTML のセクション要素と見出し要素のメリットを学ぶことができます。

ヘッダーのセマンティクスをほとんど考慮しない場合は、次のようなコードを使用することになります。

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS を使用すると、（ほぼ）すべてのマークアップを適切に表示できます。しかし、すべてに非セマンティックな <div> を使用すると、実際には余分な作業が発生します。CSS で複数の <div> をターゲットにするには、ID またはクラスを使用してコンテンツを識別します。このコードには、各終了 </div> のコメントも含まれており、各 </div> がどの開始タグを閉じたかを示しています。

id 属性と class 属性は、スタイル設定と JavaScript のフックを提供しますが、スクリーン リーダーや（ほとんどの場合）検索エンジンにセマンティックな価値を追加することはありません。

role 属性を含めてセマンティクスを提供し、スクリーン リーダーに適したユーザー補助オブジェクト モデル（AOM）を作成できます。

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

これにより、少なくともセマンティクスが提供され、CSS で属性セレクタを使用できるようになりますが、各 </div> がどの <div> を閉じるかを識別するためのコメントは追加されます。

HTML の知識があれば、コンテンツの目的を考えるだけで済みます。そうすれば、role を使用せず、終了タグをコメントアウトする必要もなく、このコードをセマンティックに記述できます。

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

このコードでは、<header> と <nav> の 2 つのセマンティック ランドマークを使用しています。

これはメインのヘッダーです。<header> 要素は必ずしもランドマークではありません。ネストされている場所によってセマンティクスが異なります。<header> が最上位にある場合、それはサイトの banner（ランドマーク ロール）です。これは、role コードブロックで確認できます。<header> が <main>、<article>、<section> にネストされている場合、そのセクションのヘッダーとして識別されるだけで、ランドマークにはなりません。

<nav> 要素は、コンテンツをナビゲーションとして識別します。この <nav> はサイトの見出しにネストされているため、サイトのメイン ナビゲーションです。<article> または <section> にネストされている場合は、そのセクションのみの内部ナビゲーションになります。セマンティック要素を使用することで、意味のあるユーザー補助オブジェクト モデル（AOM）を構築しました。AOM を使用すると、スクリーン リーダーは、このセクションが主要なナビゲーション ブロックで構成されており、ユーザーがナビゲートするかスキップするかを選択できることをユーザーに通知できます。

</nav> と </header> の終了タグを使用すると、各終了タグがどの要素を閉じたかを識別するためのコメントが不要になります。また、要素ごとに異なるタグを使用することで、id フックと class フックが不要になります。CSS セレクタの詳細度は低くてもかまいません。競合を心配することなく、header nav a を使用してリンクをターゲットに設定できます。

HTML をほとんど使用せず、クラスや ID も使用せずにヘッダーを作成しました。セマンティック HTML を使用する場合は、その必要はありません。

サイト <footer>

サイトのフッターをコーディングします。

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

<header> と同様に、フッターがランドマークかどうかは、フッターがネストされている場所によって異なります。サイトのフッターとして使用する場合は、ランドマークとして機能し、著作権表示、連絡先情報、プライバシー ポリシーや Cookie ポリシーへのリンクなど、すべてのページに表示するサイトのフッター情報を含める必要があります。サイトのフッターの暗黙的な role は contentinfo です。それ以外の場合、フッターには暗黙的なロールはなく、ランドマークではありません。これは、Chrome の AOM の次のスクリーンショットに示されています（<header> と <footer> の間に <header> と <footer> を含む <article> があります）。

このスクリーンショットには、<article> 内のフッターと最上位のフッターの 2 つのフッターがあります。最上位のフッターは、contentinfo の暗黙的なロールを持つランドマークです。もう一方のフッターはランドマークではありません。Chrome では FooterAsNonLandmark、Firefox では section と表示されます。

これは、<footer> を使用すべきではないという意味ではありません。たとえば、ブログを運営している場合、暗黙的な contentinfo ロールを持つサイトのフッターを配置できます。各ブログ投稿には <footer> を設定することもできます。ブログのメイン ランディング ページでは、ブラウザ、検索エンジン、スクリーン リーダーは、メインのフッターが最上位のフッターであり、他のすべてのフッターはネストされている投稿に関連していることを認識します。

<footer> が <article>、<aside>、<main>、<nav>、<section> の子孫である場合、ランドマークではありません。投稿が単独で表示される場合、マークアップによっては、そのフッターがプロモートされることがあります。

フッターには、連絡先アドレス要素である <address> で囲まれた連絡先情報が記載されていることがよくあります。これはあまり適切な名前ではない要素の一つです。物理的な送付先住所ではなく、個人または組織の連絡先情報を囲むために使用されます。

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

ドキュメントの構造

このモジュールでは、まず <header> と <footer> について説明します。これらは、ランドマーク（または「セクション化」）要素になることがあるためです。他にも、よく使われるセクション要素がいくつかあります。

ヘッダー、2 つのサイドバー、フッターを含むレイアウトは、ホーリーグレイル レイアウトと呼ばれます。このコンテンツをマークアップする方法は、次のように多数あります。

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

ブログを作成する場合、<main> に一連の記事を配置できます。

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

セマンティック要素を使用すると、ブラウザは意味のあるユーザー補助ツリーを作成できます。これにより、スクリーン リーダーのナビゲーションが改善されます。ここで、banner と contentinfo はサイト <header> と <footer> を通じて提供されます。ここで追加された新しい要素には、<main>、<aside>、<article> が含まれます。また、以前に使用した <h1> と <nav>、まだ使用していない <section> も含まれます。

<main>

<main> ランドマーク要素が 1 つあります。<main> 要素は、ドキュメントのメイン コンテンツを識別します。<main> はページごとに 1 つだけにする必要があります。

<aside>

<aside> は、ドキュメントのメイン コンテンツに間接的または付随的に関連するコンテンツに使用します。たとえば、このドキュメントは HTML に関するものです。3 つのサイトヘッダーの例（div、role、semantic）の CSS セレクタの特異性に関するセクションでは、接線的に関連する補足情報を <aside> に含めることができます。また、ほとんどの場合と同様に、<aside> はサイドバーまたはコールアウト ボックスに表示されます。<aside> はランドマークでもあり、暗黙的なロールは complementary です。

<article>

<main> 内にネストされた 2 つの <article> 要素を追加しました。最初の例では、メイン コンテンツが 1 つの単語（実際の状況では 1 つのコンテンツ セクション）であったため、これは必要ありませんでした。一方、2 つ目の例のようにブログを作成する場合は、各投稿を <main> 内にネストされた <article> に配置する必要があります。

<article> は、原則として独立して再利用可能な、完全な、または自己完結型のコンテンツ セクションを表します。記事は、新聞の記事と同じように考えてください。印刷物では、ニュージーランドのジャシンダ アーダーン首相に関するニュース記事は、1 つのセクション（たとえば、国際ニュース）にのみ掲載されることがあります。新聞のウェブサイトでは、同じニュース記事がホームページ、政治セクション、オセアニアまたはアジア太平洋のニュース セクションに表示されることがあります。また、ニュースのトピックによっては、スポーツ、ライフスタイル、テクノロジーのセクションに表示されることもあります。この記事は、Pocket や Yahoo ニュースなどの他のサイトにも掲載される可能性があります。

<section>

<section> 要素は、使用する具体的なセマンティック要素がない場合に、ドキュメントの一般的なスタンドアロン セクションを囲むために使用されます。セクションには、ごくまれな例外を除き、見出しを付ける必要があります。

ジャシンダ アーダーンの例に戻ると、新聞のホームページのバナーには新聞の名前が含まれ、その後に 1 つの <main> が続き、それが複数の <section> に分割され、それぞれに「世界のニュース」や「政治」などのヘッダーがあり、各セクションに一連の <article> があります。各 <article> には、1 つ以上の <section> 要素が含まれている場合もあります。このページを見ると、「ヘッダーとセクション」の部分全体が <article> です。この <article> は、site header、site footer、ドキュメント構造など、複数の <section> に分割されます。記事自体にヘッダーがあり、各セクションにもヘッダーがあります。

<section> は、ユーザー補助機能用の名前がない限り、ランドマークではありません。ユーザー補助機能用の名前がある場合、暗黙的なロールは region です。ランドマーク ロールは、ドキュメントの全体的なセクションを識別するために、控えめに使用する必要があります。ランドマーク ロールを使いすぎると、スクリーン リーダーで「ノイズ」が発生し、ページの全体的なレイアウトを理解するのが難しくなる可能性があります。<main> に 2 つまたは 3 つの重要なサブセクションが含まれている場合は、それぞれに <section> のユーザー補助機能用の名前を含めると効果的です。

見出し: <h1>～<h6>

セクション見出し要素には、<h1>、<h2>、<h3>、<h4>、<h5>、<h6> の 6 つがあります。それぞれが 6 つのレベルのセクション見出しの 1 つを表します。<h1> が最も高い（最も重要な）セクション レベルで、<h6> が最も低いレベルです。

見出しがドキュメント バナー <header> にネストされている場合、それはアプリケーションまたはサイトの見出しです。<main> 内にネストされている場合、<main> 内の <header> 内にネストされているかどうかにかかわらず、サイト全体ではなく、そのページのヘッダーになります。<article> または <section> 内にネストされている場合は、ページのそのサブセクションのヘッダーになります。

見出しレベルは、テキスト エディタの見出しレベルと同様に使用することをおすすめします。メインの見出しとして <h1> から始め、サブセクションの見出しとして <h2> を使用し、それらのサブセクションにセクションがある場合は <h3> を使用します。見出しレベルをスキップしないようにしてください。セクションの見出しに関する記事がこちらにあります。

スクリーン リーダーのユーザーの中には、ページの内容を把握するために見出しにアクセスする人もいます。本来、見出しはドキュメントのアウトラインを示すためのものでした。MS Word や Google ドキュメントが見出しに基づいてアウトラインを生成できるのと同じです。しかし、ブラウザはこの構造を実装せず、提案されたアウトライン アルゴリズムは HTML 仕様から削除されました。以前のブラウザでは、セクション要素内にネストされた <h1> 要素は小さいフォントサイズで表示されていましたが、最新のブラウザでは、これらのデフォルト スタイルは削除され、ドキュメントのアウトラインの自動作成はサポートされていません。

これで、MachineLearningWorkshop.com の概要を説明するのに十分な知識が得られました。

MLW.com の <body> の概要

以下は、機械学習ワークショップ サイトの表示コンテンツの概要です。

どのコンテンツも独立した完全なコンテンツではないため、<article> よりも <section> の方が適しています。各セクションには見出しがありますが、<footer> に値するセクションはありません。

この時点で言うまでもないことですが、テキストを太字または大きくするために見出しを使用しないでください。代わりに CSS を使用してください。テキストを強調したい場合は、そのためのセマンティック要素もあります。属性について詳しく説明した後、テキストの基本について説明しながら、その点について説明し、ページのコンテンツのほとんどを埋めます。

理解度をチェックしましょう

見出しとセクションに関する知識をテストします。