前のセクションでは、ページ上の単語の意味がわからなくても、セマンティック要素がドキュメントに意味のある構造を与えることで、検索エンジン、支援技術、将来のメンテナンス担当者、新しいチームメンバーなどがドキュメントの概要を理解する方法を学びました。
このセクションでは、ドキュメントの構造を確認し、前のセクションのセクショニング要素をまとめ、アプリケーションのアウトラインをマークアップします。
コーディング時にジョブに適した要素を選択すれば、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> がトップレベルの場合は、role コードブロックでメモしたランドマークのロールであるサイト banner です。<header> が <main>、<article>、または <section> にネストされている場合、そのセクションのヘッダーとして識別されるだけで、ランドマークではありません。
<nav> 要素は、コンテンツがナビゲーションとして識別されます。この <nav> はサイトの見出しにネストされているため、サイトのメイン ナビゲーションです。<article> または <section> にネストされている場合は、そのセクションの内部ナビゲーションのみになります。セマンティック要素を使用して、有意義なユーザー補助オブジェクト モデル（AOM）を構築しました。AOM を使用すると、このセクションは主要なナビゲーション ブロックで構成されており、ユーザーは移動またはスキップできることをユーザーに伝えることができます。
</nav> 終了タグと </header> 終了タグを使用すると、各終了タグが閉じた要素を識別するためにコメントする必要がなくなります。また、要素ごとに異なるタグを使用すると、id フックと class フックが不要になります。CSS セレクタの限定性は低くてもかまいませんが、競合を気にせずに header nav a でリンクをターゲットに設定することはできます。
HTML がほとんど含まれておらず、クラスや ID もないヘッダーが記述されています。セマンティック HTML を使用する場合、その必要はありません。
サイト <footer>
サイトのフッターをコーディングしてみましょう。
<footer>
<p>©2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>
<header> と同様に、フッターがランドマークかどうかは、フッターがどこにネストされているかによって決まります。サイトのフッターはランドマークです。著作権表示、連絡先情報、プライバシー ポリシーや Cookie ポリシーへのリンクなど、すべてのページに配置したいサイトのフッター情報を含める必要があります。サイトのフッターの暗黙的な role は contentinfo です。それ以外の場合、Chrome の AOM のスクリーンショット（<header> と <footer> の間に <header> と <footer> の <article> がある）のように、フッターは暗黙的なロールがなく、ランドマークにもなりません。
このスクリーンショットには、2 つのフッターがあります。1 つは <article> に、もう 1 つはトップレベルです。最上位のフッターは、contentinfo が暗黙的にロールを持つランドマークです。もう 1 つのフッターはランドマークではありません。Chrome では FooterAsNonLandmark、Firefox では section と表示されます。
これは、<footer> を使用してはならないという意味ではありません。たとえば、ブログを運営しているとします。このブログには、暗黙的な contentinfo ロールが設定されたサイトのフッターがあります。各ブログ投稿に <footer> を指定することもできます。ブログのメイン ランディング ページにおいて、ブラウザ、検索エンジン、スクリーン リーダーは、メイン フッターがトップレベル フッターであり、その他のフッターはすべて、それらがネストされている投稿に関連していることを認識します。
<footer> が <article>、<aside>、<main>、<nav>、<section> の子孫である場合、それはランドマークではありません。投稿が単独で表示される場合、マークアップによっては、そのフッターがプロモートされる場合があります。
多くの場合、フッターには連絡先の住所要素である <address> でラップされた連絡先情報が含まれます。この要素は、あまり知られていない名前で、物理的な送付先住所ではなく、個人や組織の連絡先情報を囲むために使用されます。
<footer>
<p>©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 ページに 1 つだけ配置する必要があります。
<aside>
<aside> は、ドキュメントのメイン コンテンツに間接的または接線的に関連するコンテンツに使用します。たとえば、この記事は HTML に関するものです。3 つのサイトヘッダー サンプル（div、role、セマンティック）の CSS セレクタの特異性に関するセクションの場合、接線方向に関連するものは <aside> に含めることができ、ほとんどの例と同様に、<aside> はサイドバーまたはコールアウト ボックスに表示されます。<aside> もランドマークで、暗黙的に complementary の役割があります。
<article>
<main> に <article> 要素を 2 つ追加しました。最初の例では、メイン コンテンツが 1 つの単語のみ、または実際のコンテンツでは 1 つのセクションのみであった場合、この作業は必要ありませんでした。ただし、2 番目の例のようにブログを作成する場合は、各投稿を <main> にネストされた <article> に入れる必要があります。
<article> は、原則として独立して再利用できる、完全な（自己完結型の）コンテンツ セクションを表します。記事は新聞の記事のようなものだと考えてください。印刷媒体では、ニュージーランドの首相 Jacinda Ardern に関するニュース記事は 1 つのセクションにのみ掲載され、世界ニュースの場合もあるかもしれません。同紙のウェブサイトでは、ホームページ、政治セクション、オセアナやアジア太平洋のニュースセクションに加え、ニュースのトピックによってはスポーツ、ライフスタイル、テクノロジーのセクションなどにも同じニュース記事が掲載されています。Pocket や Yahoo! News!
<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 つのレベルのセクション見出しのいずれかを表します。<h1> は最も高いまたは最も重要なセクション レベル、<h6> は最も低いセクションです。
見出しがドキュメント バナー <header> にネストされている場合は、アプリケーションまたはサイトの見出しになります。<main> でネストする場合、<main> の <header> 内にネストされているかどうかは関係なく、サイト全体ではなくそのページのヘッダーです。<article> または <section> にネストされている場合は、ページのそのサブセクションのヘッダーです。
テキスト エディタの見出しレベルと同様に、見出しレベルを使用することをおすすめします。メイン見出しは <h1>、サブセクションの見出しは <h2>、サブセクションにセクションがある場合は <h3> です。見出しレベルはスキップしないでください。こちらのセクション見出しに関する記事をご覧ください。
スクリーン リーダーの一部のユーザーは、ページのコンテンツを理解するために見出しにアクセスします。もともと、MS Word や Google ドキュメントで見出しに基づいて概要を作成できるのと同様に、見出しはドキュメントの概要を示すものでしたが、ブラウザではこの構造は実装されませんでした。次の例に示すように、ブラウザではネストされた見出しを徐々に小さなフォントサイズで表示しますが、実際にはアウトライン表示をサポートしていません。
これで、MachineLearningWorkshop.com の概要を説明するのに十分な知識が身につきました。
MLW.com の<body>の概要
以下は、機械学習ワークショップ サイトに表示されるコンテンツの概要です。
どのコンテンツも独立した完全なコンテンツではないため、<article> よりも <section> のほうが適しています。それぞれに見出しがありますが、<footer> に値するセクションはありません。
現時点では言うまでもありませんが、見出しを使ってテキストを太字にしたり、大きくしたりするのではなく、CSS を使用してください。テキストを強調したい場合、それを行うためのセマンティック要素もあります。属性について詳しく学んだ後、テキストの基本について説明しながら、この点を説明し、ページのコンテンツのほとんどに入力していきます。
理解度をチェックする
見出しとセクションに関する知識をテストします。
サイトのロゴやタイトル、メイン ナビゲーションなど、サイトの領域を構成するために使用される要素は何ですか？
<heading><header><title>1 つのページで使用できる <main> 要素はいくつですか？