見出しとセクション

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

このセクションでは、ドキュメントの構造、前のセクションのセクショニング要素をまとめます。アプリケーションの概要をマークアップします。

コーディングの際にジョブに適切な要素を選択すれば、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 のフックを提供しますが、スクリーン リーダーと（ほとんどの場合）検索エンジンにセマンティックな値を追加しません。

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

<!-- 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> に 1 つ、トップレベルに 1 つ、合計 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>

セマンティック要素を使用すると、ブラウザで意味のあるアクセシビリティ ツリーを作成し、スクリーン リーダーのユーザーが簡単に移動できるようになります。ここでは、banner と contentinfo はサイト <header> と <footer> から提供されています。ここに追加された新しい要素には、<main>、<aside>、<article> があります。先ほど使用した <h1> と <nav>、まだ使用したことのない <section> です。

<main>

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

<aside>

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

<article>

<main> にネストし、2 つの <article> 要素を追加しました。最初の例でメイン コンテンツが 1 つの単語だけであった場合や、現実の世界ではコンテンツの 1 つのセクションである場合、これは必要ないものでした。しかし、2 番目の例のようにブログを作成する場合は、各投稿を <main> にネストされた <article> 内に配置する必要があります。

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

<section>

<section> 要素は、使用する具体的なセマンティック要素がない場合に、ドキュメントの汎用的なスタンドアロン セクションを含めるために使用されます。セクションには見出しが必要ですが、例外はほとんどありません。

Jacinda Ardern の例で言うと、このバナーは新聞のホームページで、その後に新聞名が 1 つ含まれ、その後に 1 つの <main> が続き、複数の <section> に分けられ、それぞれにヘッダー（「World news」など）が付いています。「政治」各セクションには、一連の <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 つのレベルのいずれかを表します。<h1> は最高または最も重要なセクション レベル、<h6> は最低セクション レベルです。

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

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

一部のスクリーン リーダー ユーザーは、見出しにアクセスしてページのコンテンツを理解します。もともと、MS Word や Google ドキュメントが見出しに基づいて概要を作成できるのと同様に、見出しは文書を概説するものとされていましたが、ブラウザはこの構造を実装していません。ブラウザでは、次の例に示すように、ネストされた見出しが徐々に小さいフォントサイズで表示されますが、実際には枠線はサポートされていません。

MachineLearningWorkshop.com の概要を説明するための十分な知識が身につきました。

MLW.com の<body>の概要

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

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

言うまでもなく、見出しを使ってテキストを太字にしたり、大きくしたりしないでください。代わりに CSS を使用してください。テキストを強調したい場合は、そのためのセマンティック要素もあります。テキストの基本を説明しながら、このページの大部分の内容について説明していきます。詳しく見ていきます

理解度をチェックする

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