ドキュメント構造とアウトライン
ページは要素の単なる集まりではありません。上から下へと読み進めていくと、まとまりを持つべきです。タイトルがあり、その下に各セクションが続き、それぞれが独自の見出しを持ち、移動するのに理にかなった順序になっています。その形状がページのアウトラインであり、それは2つのものが協力して作られます。見出しは各部分に名前をつけ、セマンティックHTMLの章からのランドマーク領域、<header>、<nav>、<main>、<aside>、<footer>は、それらの部分を領域にグループ化します。この章では、この2つがどのように全体ページに結合されるかについてです。
見出しとランドマークがアウトラインをどのように形成するか
ウェブページは上から下へと読まれます。ちょうど本のページを読むのと同じ方法です。ページを訪れる誰もが上から始めて下へ進むので、コンテンツがある順序は、訪問者がそれを読む順序です。誰かが実際に出会いたいと思う順序に物を置いてください。
見出しは、その順序に形を与えます。見出しは、その後に続く部分の短いラベルで、<h1>から<h6>までのタグで書かれています。<h1>はページ全体のタイトルです。各<h2>はその下のメインセクションに名前をつけ、<h3>は<h2>内の小さい部分に名前をつけます。それらを積み重ねると、ページの**アウトライン**が得られます。ページの順序を反映した目次です。
<h1>初心者向けサワドウ</h1>
<h2>必要なもの</h2>
<h3>材料</h3>
<h3>道具</h3>
<h2>スターターを作る</h2>見出しだけを読んでも、1つの段落も読む前に、ページが何についてで、どのように構成されているかすでに分かります。
<h1>から<h6>は骨格です。<h1>はページタイトルで、すべてはその下にネストされます。見出しだけを読むと、ページがどのようにレイアウトされているかすでに知っているはずです。 1つのメインと正しい見出し順序
2つの習慣でアウトラインをクリーンに保ちます。まず、ページに単一の<h1>を与えます。それはページのタイトルで、ページは本がカバーに1つの名前を持つのと同じように1つのタイトルを持ちます。他はすべて<h2>以下です。
次に、レベルをスキップしないでください。<h2>の後、次のステップダウンは<h3>で、<h5>ではありません。レベルをスキップするとアウトラインに間隙が生じます。これは第1章と第4章をリストする目次のようなものです。一度に1レベルを上下に移動します。
<h1>平日のディナー</h1>
<h2>パスタ</h2>
<h3>トマトとバジル</h3>
<h3>ニンニクバター</h3>
<h2>サラダ</h2>
<h3>ギリシャンサラダ</h3>これらの見出しが座っているコンテンツは、通常1つの<main>領域に存在します。<main>はページのプライマリコンテンツをマークし、このページに一意の部分であり、すべてのページで繰り返される共有ヘッダー、ナビゲーション、フッターではありません。<h1>があるのと同じように、1つの<main>があります。
<h1>です。見出しレベルを一度に1つ下げます。<h2>その後<h3>で、<h5>へジャンプしません。ページのメインコンテンツは1つの<main>に入ります。見出しがサイズが間違っているように見えたら、それはCSSの仕事で、レベルを切り替える理由ではありません。 コンテンツのグループ化と順序付け
関連するコンテンツはグループ化されているとより良く読まれます。このための2つの要素が存在します。<section>はページの主題別チャンクで、レシピの「材料」部分のように独自の見出しを持ちます。<article>は単体で立ち、それを持ち上げて取り出しても理にかなう部分です。単一のブログ投稿やカスタマーレビューのように。
<article>
<h2>スロー・ライズ・フォカッチャ</h2>
<p>ほぼこねる必要がないローフ。</p>
</article>グループ化と同じくらい順序が重要です。ページは上から下へと読まれるため、最も重要なコンテンツを上の方に置き、残りを読者が希望する順序に配列します。レシピはステップの前に何が必要なかをリストしています。それはあなたがそれを続ける順序だからです。
<section>、単一投稿のようにそれ自身で立つ部分の<article>で関連するコンテンツをグループ化します。それからその順序に気を付けます。ページは上から下へ読まれるため、重要な物は上の方に行きます。誰かが実際にそれを読みたいと思う順序でそれを書いてください。 一般的な構造的な間違い
少数の構造的な間違いは何度も現れ、各々がクリーンな修正を持っています。
- テキストを大きくするために見出しタグを使用する。 見出しがレンダリングされるサイズが必要だから
<h3>に到達する、アウトラインを破ります。意味によってレベルを選択し、CSSでサイズを設定します。 - 見出しレベルをスキップする。
<h2>から<h4>へジャンプしてアウトラインに穴を残します。一度に1レベル下ります。 - 複数の
<h1>。 ページは1つのタイトルを持ちます。余分な<h1>タグは目次を混乱させます。 - 見出しがまったくない。 段落の長い実行に何もそれを破るものがないことは、スキャンするのが難しいです。見出しを追加して、読者が自分の道を見つけることができるようにします。
これらを修正して、ページはすべての誰にとって明確に読みます。眼でスキャンしているか、それを読み上げて聞いているか。アクセシビリティの章は、すべての訪問者のためにページを機能させるにあたりさらに進みます。
<h1>を追加しないこと、そして長いページを見出しなしで残さないこと。それぞれがアウトラインを混乱させます。見出しレベルを意味によって選択し、CSSにサイズの処理を任せてください。