セマンティックHTML

docs.scrimba.com

2つのページは見た目は全く同じでも、その下は全く異なる方法で構築されている場合があります。一方はコンテンツに基づいて名前を付けられた要素を使用しています。ヘッダー、ナビゲーション、メイン領域です。もう一方は、すべてを同じ無名ボックスにラップし、クラス名でそれらを区別しています。画面上は区別できません。その他のあらゆる点で、これらは全く異なるページです。意味によって要素を選択することが、セマンティックHTMLについてのことです。

セマンティックの意味

セマンティック は「意味に関する」という意味です。セマンティック要素とは、その名前がコンテンツが何であるかを示す要素のことです。段落は <p> に入ります。なぜなら、それが段落だからです。ナビゲーションメニューは <nav> に入ります。なぜなら、それがナビゲーションだからです。タグ名が物事を名前付けます。

ほとんどすべてのページを1つの汎用ボックスで構築し、スタイル設定で見た目を整えることができます。しかし、ページ上のどこにも何であるかが示されません。コンテンツに名前を付ける要素を選択することは、引っ越し時にボックスにラベルを付けるようなものです。すべてが無地のラベルなしのボックスに収まりますが、ラベルこそが、他の誰かがブラウザが各ボックスを開くことなく中身が何であるかを理解できるようにするものです。

要素は、コンテンツの見た目ではなく、コンテンツの意味が名前で説明される場合、セマンティック です。<nav>、<article>、<button> はセマンティックです。コンテンツが何のためのものかを教えてくれます。<div> と <span> はセマンティックではありません。それらは汎用コンテナであり、それ自体では何の意味も持ちません。

メリットは、意味がマークアップ内に生きているため、他のツールがそれを読むことができるということです。ブラウザは何も追加することなく、<button> がクリック可能で、キーボードでフォーカス可能であることを知っています。スクリーンリーダー は、<nav> をナビゲーション領域として読み上げることができます。検索エンジンは <article> を自己完結したコンテンツと見なします。スタイル付きの <div> の場合、そのどれも機能しません。なぜなら、<div> がそれが保持するものについて何も約束しないからです。

セマンティックスは、意味を持つ要素とピクセルのみを持つ要素の違いです。<nav> と書くと、単なるボックスを描画しているのではなく、ドキュメントについての事実を述べています。この領域はナビゲーションです。その事実は アクセシビリティツリー に記録されます（DOMの並行構造で、ブラウザが構築し、各要素の役割と状態を支援技術に説明します）。それが、視力のあるマウスユーザー以外のツールが作用する対象です。

実用的なテストは代替です。要素をスタイル付きのむき出しの <div> に置き換えて、見た目が同じになるようにした場合、何を失いますか？<p> または装飾的なラッパーの場合、意味のあることは何も失いません。<button> の場合、キーボードフォーカス、Enter キーと Space キーの処理、スクリーンリーダーへの「ボタン」アナウンスメント、そしてそれらすべてを手動で再構築する必要があります。そのギャップがセマンティックスです。要素の名前がコンテンツが何であるかを教えてくれたため、ブラウザが無料で提供する動作と意味です。名前の付いた要素を選択することは、スタイル設定の好みではなく、正しい動作を得る最も安い方法です。

Junoセマンティックの意味 セマンティックは、タグが保持するものに基づいて名前を付けることを意味します。<p> の段落、<nav> のメニュー。すべてを無地のボックスに入れてスタイル設定で同じように見せることができますが、何もそれが何であるかを示しません。引っ越しボックスにラベルを付けて、誰もが中身が何であるかわかるようにするようなものです。

Junoセマンティックの意味 セマンティック要素はその意味に名前を付け、<div> は何も名前付けません。メリットは、ブラウザ、スクリーンリーダー、検索エンジンがすべてマークアップから意味を直接読むことができるということです。コンテンツを説明する要素を選択し、本当に説明することがない場合は <div> を使用してください。

Junoセマンティックの意味 代替テストを実行します。要素をスタイル付きの <div> に置き換えて、何を失ったかを尋ねます。答えがキーボードフォーカス、アクセシビリティツリー内の役割、またはスクリーンリーダーのアナウンスメントである場合、それはあなたが無料で取得していたセマンティックスです。手動で再構築することは常に、名前の付いた要素を使用するよりも多くの作業です。

ランドマーク要素

ページの大きな領域をマークするために存在する要素が少数あります。これらが最初に選択するものです。

• <header> はページまたはセクションの上部です。ロゴ、タイトル、導入部です。
• <nav> はナビゲーションリンクのセットであり、メインメニューのようなものです。
• <main> はメインコンテンツであり、ページが存在する理由です。
• <section> は関連したコンテンツの集まったチャンクであり、通常は独自の見出しを持っています。
• <article> は自己完結した部分です。ブログ投稿やニュース記事のように、それ自体で理解できます。
• <aside> は脇にあるコンテンツです。関連リンク、注記、広告です。
• <footer> はページまたはセクションの下部です。著作権、連絡先詳細、小さな印字です。

ルールはいつも同じです。領域がナビゲーションの場合、<div> ではなく <nav> に入ります。フッターの場合、<footer> に入ります。領域をそれと一致する要素で名前付けます。

<header>
  <h1>太郎のキッチン</h1>
  <nav>
    <a href="/recipes">レシピ</a>
    <a href="/about">について</a>
  </nav>
</header>
<main>
  <h2>平日のディナー</h2>
  <p>仕事の後で作ることができる簡単な食事。</p>
</main>
<footer>
  <p>東京で製作。</p>
</footer>

7つの要素がページを主要な領域に分割し、まとめてそれらは ランドマーク要素 と呼ばれます。各要素が、リーダーまたはツールがナビゲートできる領域をマークするからです。

• <header> はその最も近いコンテナを導入します。ページの上部でサイトブランディングを保持し、<article> 内でその記事のタイトルと著者情報を保持します。
• <nav> はナビゲーションリンクのブロックをラップします。主要なもの、メインメニューまたは目次に使用します。ページ上のすべてのランダムなリンクには使用しません。
• <main> はドキュメントのプライマリコンテンツを保持し、サイト全体で繰り返されるのではなく、このページに固有の部分です。
• <section> は一緒に属する関連コンテンツを分類し、通常は見出しで導入されます。
• <article> は完全で独立した単位です。投稿、コメント、製品カード。テストは、それが取り出されて独自に表示されてもまだ意味があるかどうかです。
• <aside> は周辺に接線的なコンテンツを保持しています。サイドバー、プルクォート、関連リンク。
• <footer> はそれが含まれるのに最も近いコンテナをラップアップ素材で閉じます。著者、リンク、法的テキスト。

重要なアイデアは、これらのほとんどが文脈的であるということです。<header> と <footer> はそれらが内部にあるものを説明します。そのため、1つのページは複数の各ペアを保持できます。ページ用に1つのペア、各 <article> 用に1つです。<main> は次のセクションで取り上げられる例外です。

<article>
  <header>
    <h2>ローストトマトスープ</h2>
    <p>太郎作、20分</p>
  </header>
  <p>トマトを半分にして、柔らかくなるまでローストします。</p>
  <footer>
    <p>4人前です。</p>
  </footer>
</article>

7つの領域要素は HTML ランドマーク です。アクセシビリティツリーでナビゲート可能な領域を公開する要素。各要素は、支援技術がリストアップして移動できる役割にマップされます。これが、ソースで整然と見えることを超えて、それらが重要な理由です。

• <header> はページレベルで banner 役割にマップされますが、<article>、<aside>、<main>、<nav>、または <section> の内部に入れられた場合はマップされません。そこでは、ランドマーク役割を持たない導入用のグループです。
• <footer> はそれを反映しています。ページレベルで contentinfo、そしてそれらのセクション化要素の1つの内部にある場合は無地のグループです。
• <nav> は navigation 役割です。ページは通常、1つ以上を持ちます。メインメニューとページ内コンテンツリスト。これが下のラベル設定が重要な理由です。
• <main> は main 役割であり、プライマリコンテンツをマークします。ページごとに1つです。
• <aside> は complementary 役割です。メインコンテンツをサポートしますが、それから独立しているコンテンツ。
• <section> は、アクセシビリティ名を持つ場合にのみ region ランドマークになります。通常は それに結び付けられた見出し からです。名前のない <section> はランドマークを公開しません。アクセシビリティツリーにとって <div> に似ています。
• <article> は article 役割を持ちます。自己完結した構成であり、ツールが列挙できますが、他の要素と同じ意味でのナビゲーションランドマークではありません。

デザイン目標は、非視覚ユーザーが視覚的なレイアウトをスキャンするのと同じ速さで調査できるドキュメントです。スクリーンリーダーはすべてのランドマークのリストを生成して、ユーザーが介在するコンテンツを聞くことなく「main」または「navigation」に直接ジャンプできます。これは、領域が実際のランドマーク要素でマークされている場合にのみ機能します。壁から壁への <div> は、ランドマークのない全くドキュメントを生成します。そのため、それをナビゲートする唯一の方法は、上から下です。

<body>
  <header>            <!-- banner: ページレベル -->
    <nav>...</nav>    <!-- navigation -->
  </header>
  <main>              <!-- main: 1つのプライマリ領域 -->
    <article>...</article>
    <aside>...</aside> <!-- complementary -->
  </main>
  <footer>...</footer> <!-- contentinfo: ページレベル -->
</body>

Junoランドマーク要素 知っておく価値がある7つの領域タグがあります。<header>、<nav>、<main>、<section>、<article>、<aside>、および <footer>。各要素はページの部分に名前を付け、構築している領域と一致するものを選択します。今日、それらを暗記する必要はありませんが、何度も何度も現れるまで定着します。

Junoランドマーク要素 7つの要素がページを領域に分割し、そのほとんどはそれらが内部にあるものを説明します。そのため、<header> と <footer> は複数回出現できます。<article> のテストは、多くの二重チェックから私を救いました。それを引き出して独自に表示された場合、それはまだ理解できますか？そうであれば、それは記事です。それが見出しを持つグループ化されたチャンクの場合、それはセクションです。

Junoランドマーク要素 これらはランドマークであり、各要素は、スクリーンリーダーがジャンプできる役割にマップされます。それが <div> の山をめぐる理由です。注目する価値がある2つの注意点があります。<header> と <footer> は、トップレベルでのみ <banner> と <contentinfo> ランドマークになります。<section> は、アクセシビリティ名を持つ場合にのみ、ランドマークです。名前のないセクションは、基本的に支援技術にとって div です。

div と span、非セマンティックフォールバック

ページのすべての部分に名前を付ける価値のある意味があるわけではありません。時には、スタイル設定できるようにグループ化するだけでボックスが必要な場合、または数語をラップして色付けする場合があります。そのために、それ自体に何の意味も持たない2つの無地の要素があります。

<div> は汎用ブロックです。他の要素が合わない場合に使用する空のコンテナです。<span> は行内の小さなテキスト実行の場合も同じ考えです。どちらもコンテンツについて何も言いません。それらはスタイル設定とグループ化のためのフックとしてのみ存在します。

<p>本日の合計は <span class="price">¥4200</span> です。</p>

<div class="card">
  <h2>スペシャルオファー</h2>
  <p>すべてのパスタで2つ買って1つ無料です。</p>
</div>

<span> は価格をラップして色付けします。<div> はカードをグループ化して、その周りに枠線を引きます。これらは何もより意味のあるフィットがない場合にのみ選択してください。ブラウザに内部にあるものについて何も言いません。

<div> と <span> は、意味が全くない2つの要素であり、それは正確にそれが何のためのものかです。<div> は汎用ブロックレベルコンテナです。<span> は汎用インラインコンテナです。これらを スタイル設定フック として使用します。グループ化するか、コンテンツをターゲットにする必要があるが、意味のあることは何もない場合に、クラスまたは id をハングアップする場所です。

<div class="grid">
  <article class="card">...</article>
  <article class="card">...</article>
</div>

<div class="grid"> はカードをグリッドにレイアウトするためにのみ存在します。それはプレゼンテーション上の仕事であり、意味のあるものではありません。そのため、<div> が正しい選択です。フォールバックではなく、悪く感じるべきです。間違いは逆です。意味のあるもののために <div> を使用することです。クリック可能な <div> は <button> であるべき、ナビゲーションリンクで満ちた <div> は <nav> であるべき、投稿全体をラップする <div> は <article> であるべきです。意味がなく、レイアウトまたはスタイル設定の必要性がある場合にのみ、<div> と <span> が正しい答えです。

<div> と <span> は、セマンティック的に空の要素です。汎用ブロックと汎用インラインコンテナであり、それぞれ、アクセシビリティツリーに役割がなく、ツールが発表すべき意味がありません。それらは1つの仕事、プレゼンテーション フック に対する正しい選択です。スタイル設定を接続するためだけに存在する要素、または子をレイアウトのためにグループ化し、スクリーンリーダーまたは検索エンジンが発表すべき情報を持たない要素です。

意味のある要素が意図的なままであるため、意味が全くない要素を持つ価値があります。グリッドラッパー、フレックスボックス行、位置決めコンテキスト。これらは意味のあるセマンティックコンテンツのない実際のニーズであり、意味のある要素を強制することはマークアップの嘘になります。背景色のみの目的で使用される <section> は、領域ではないことを主張しています。ルールは両方向に実行されます。意味のある要素が合う場合は <div> に手を出さず、必要なのがボックスだけの場合は意味のある要素に手を出さないでください。

監視する失敗モードはインタラクティブな <div> です。ボタンまたはリンクのように動作するようにJavaScriptのクリックハンドラが指定された要素。レンダリングされてマウスでクリックされるため、完成に見えますが、役割がなく、タブオーダーに含まれず、Enter または Space に応答せず、スクリーンリーダーは何も発表しません。tabindex、role、およびキーハンドラでそのすべてを再実装することは、既に存在する <button> の脆弱な再実装です。ものが制御のように動作する場合、制御要素を使用します。<div> と <span> を、それがピクセルのみである部分に保持します。

Junodiv と span、非セマンティックフォールバック<div> は無地のボックスで、<span> は数語の無地のラッパーであり、どちらも何も意味していません。グループ化またはスタイル設定するだけで済み、名前の付いた要素が合わない場合に使用します。ものに意味がある場合（メニューやボタンなど）は、代わりにその要素を使用してください。

Junodiv と span、非セマンティックフォールバック<div> または <span> は、唯一の仕事がレイアウトまたはスタイル設定であり、意味を述べられない場合の正しい呼び出しです。そのことについて悪く感じないでください。逆のことについて悪く感じてください。<button> であるべきクリック可能な <div>、または <article> であるべきラッパー <div>。空の意味のための空の要素、実際の意味のための名前の付いた要素。

Junodiv と span、非セマンティックフォールバック<div> と <span> はアクセシビリティツリーに役割を持ちません。これは、純粋なスタイル設定フックに適している理由であり、意味のあるものに不適切である理由です。あなたを噛むであろう1つはクリックハンドラを持つインタラクティブな <div> です。フォーカスなし、キーボードなし、発表なし、および <button> が与えるものを偽造するための tabindex と role パッチの山。それが制御のように動作する場合、制御を作成してください。

正しい要素を選択する

どの要素を使用するかわからない場合は、1つの単純な質問をしてください。これは何ですか？それがどのように見えるか、それが何であるかではなく。答えは通常、その要素に名前を付けます。ページの上部にある一列のリンクはナビゲーションであるため、<nav> です。下部にある小さな印刷物のブロックはフッターであるため、<footer> です。色付けしたい価格は実際には何でもないため、<span> です。

意味から始めることが習慣になると、ページはそれ自体を説明し、そのペイオフは、あなたまたは他の誰かがマークアップを再度読む必要がある瞬間に起こります。

正しい要素を選択することは、毎回実行できる短い決定です。コンテンツが何であるかを尋ね、回答が要素を選択させてください。

• それはそれ自体で理解できる、それ自体で意味がある完全なものですか？ <article>。
• 見出しを持つ関連コンテンツのグループ化されたチャンクですか？ <section>。
• ナビゲーションですか？ <nav>。領域への導入？ <header>。ラップアップ？ <footer>。
• メインコンテンツをサポートする側方コンテンツですか？ <aside>。
• 意味がなく、レイアウトまたはスタイル設定の必要性しかありませんか？ <div> または行内の <span>。

最も厄介なフォークは <section> vs <article> vs <div> です。順番に歩きます。ブロックが単独で存立できる場合、それは <article> です。そうでなく、独自の見出しを持つテーマ付きグループの場合、それは <section> です。見出しがなく、意味がなく、スタイル設定またはレイアウトのためにのみ存在する場合、それは <div> です。<section> はほぼ常に見出しを持つべきです。1つ思い付かない場合、それは <div> が欲しかったことの強い兆候です。

<main>
  <section>
    <h2>最新の投稿</h2>
    <article>
      <h3>プレーンHTMLに切り替えた理由</h3>
      <p>...</p>
    </article>
    <article>
      <h3>重いフレームワークに対する主張</h3>
      <p>...</p>
    </article>
  </section>
</main>

ここでは、<section> はテーマ付きグループ「最新の投稿」です。その中の各投稿は <article> です。なぜなら、それは独立しているからです。ネストは意味を反映しています。

上手に選択することは、意味を最初に読むことと、レイアウトを決して読まないことに要約されます。いくつかのルールは、一般的な決定を機械的にしています。

ページあたり正確に1つの <main> があります。それはプライマリコンテンツ、サイト全体で繰り返されるヘッダー、ナビゲーション、フッターではなく、このページに固有の部分をマークします。アクセシビリティツリーで複数の <main> は、スクリーンリーダーユーザーに2つの「main」ターゲットを与え、どちらが実際のものであるかを知る方法がないため、単一に保持します。サイト全体のすべてはそれの外側に属しています。

繰り返し重要になるもう1つのルールは、繰り返しるランドマークのラベル設定 です。ページに同じランドマークタイプの2つの要素がある場合、プライマリ <nav> とページ内の目次リスト、両方が「ナビゲーション」として発表され、ユーザーはそれらを区別できません。aria-label を使用して区別します。画面に何も表示せずにリージョンの短いアクセシビリティ名を提供する属性です。

<nav aria-label="Primary">
  <a href="/">ホーム</a>
  <a href="/blog">ブログ</a>
</nav>

<nav aria-label="On this page">
  <a href="#intro">導入</a>
  <a href="#setup">セットアップ</a>
</nav>

これで、2つの領域は「プライマリナビゲーション」と「このページのナビゲーション」として発表されます。ランドマークリストは使用可能です。繰り返されるランドマーク（<aside> または <section> を含む）に同じラベル設定を適用します。<section> の場合、結び付けられた見出しまたは aria-label からのいずれかであるかどうか、アクセシビリティ名を持つ場合にのみランドマークになることを思い出します。

すべてのこの背後にあるメタルールは、マークアップはドキュメントのマシン読み取り可能な説明です。スクリーンリーダー、検索クローラー、リーダーモードツール、およびあなたの将来の自己に読まれます。意味によって要素を選択することが、その説明を真実にするものです。レイアウトはCSSの仕事であり、要素を見た目で選択していることがわかった場合、CSSの領域に間違ったツールで入った時点です。

Juno正しい要素を選択する 立ち往生した場合、見た目ではなく、その物が何であるかを尋ねてください。ナビゲーションは <nav> で、小さな印字は <footer> で、スタイル設定したいプレーンボックスは <div> です。毎回意味から始めると、ページはそれ自体を説明します。

Juno正しい要素を選択する 小さなチェックリストを実行します。独立して立つは <article> で、見出しを持つテーマ付きグループは <section> で、意味がなくスタイル設定のみは <div> です。セクション対divの議論のほとんどを解決するタイブレーカー。それに名前を付けられない場合は、<div> が欲しかったです。意味が選択タグを選択し、ネストが自分自身を整理します。

Juno正しい要素を選択する 2つのルールが重量の大部分を実行します。ページあたり正確に1つの <main> と、2つのnavが両方「ナビゲーション」と言わないように aria-label を含む繰り返されるランドマークのラベル。<section> が、アクセシビリティ名を持つ場合にのみランドマークであることに留意してください。意味によって要素を選択し、見た目をCSSに任せてください。タグを見た目で選択すると、CSSの仕事を間違ったツールで実行しているからです。