見出しとセクション

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

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

コーディング時に適切な要素を選択すると、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 を持つランドマークです。もう 1 つのフッターはランドマークではありません。Chrome では FooterAsNonLandmark として表示され、Firefox では section として表示されます。

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

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

多くの場合、フッターには連絡先情報が <address>（連絡先住所要素）で囲まれて表示されます。これは、名前が適切でない要素の 1 つです。物理的な郵送先住所ではなく、個人または組織の連絡先情報を囲むために使用されます。

<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>

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

<main>

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

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

Jacinda Ardern の例に戻ると、新聞のホームページでは、新聞の名前の後に 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 ドキュメントでは見出しに基づいて概要を作成できますが、ブラウザではこの構造が実装されていません。ブラウザでは、次の例に示すように、ネストされた見出しがフォントサイズを小さくして表示されますが、実際には概要の作成はサポートされていません。

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

MLW.com の <body> の概要

ML ワークショップ サイトの表示コンテンツの概要は次のとおりです。

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

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

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

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