見出しと段落

HTMLにはh1からh6までの六段階の見出しがあり、スクリーンリーダーの利用者は、見出しから見出しへと移動してページの中を進むことがよくあります。

見出しでつくるアウトライン

料理の本を思いうかべてみましょう。本には書名があり、それぞれのレシピには名前があり、さらに「材料」や「作り方」のような小さな部分があります。HTMLは同じアウトラインを、<h1> から <h6> までの六つの見出し要素で表します。<h1> はいちばん上の段階で、ふつうはページのタイトルです。<h2> は主な節、<h3> は節の中の部分、というように続きます。ほとんどのページは三〜四段階より多くは必要ありません。

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

段階は大きさではなく構造で選ぶ

ブラウザーは <h1> を大きく、<h6> を小さく描くので、大きさで見出しを選びたくなります。それはがまんしましょう。段階は、ページがどう構成されているかをソフトウェアに伝えます。スクリーンリーダーはページの見出しをすべて一覧にして、目次のように利用者がすぐにそこへ移動できるようにします。検索エンジンも、ページが何を扱っているかを理解するのに見出しを使います。h2を小さく見せたいなら、h2のままにしてCSSで大きさを変えましょう。

アウトラインをきれいに保つ習慣が二つあります。一つ目は、ページのメインタイトルに <h1> を一つだけ使うことです。MDNもこれをすすめていて、ほとんどの利用者が期待する形です。二つ目は、下りるときに段階を飛ばさないことです。h2のあとはh3で、h5ではありません。上にもどるのはかまわないので、次の節が始まるときにはh3のあとに新しいh2がきてもかまいません。

段落

本文は段落ごとに一つずつ <p> 要素に入れます。HTMLは空白をまとめるので、ファイルの中でEnterを二回押しても画面には新しい段落はできません。新しい段落をつくるのは新しい <p> だけです。ブラウザーは初期設定で各段落の上下にすき間をあけますが、CSSで変えられます。段落の中には別の段落や見出しを入れられないので、終了タグ </p> を忘れても、次のブロック要素が始まった時点でブラウザーが閉じてくれます。

郵便の住所や詩のように、改行そのものが内容の一部であることもあります。そのときは、一つの段落や <address> の中で、各行の終わりに <br> を使います。縦のすき間をつくるために <br> 要素を積み重ねてはいけません。それはCSSのマージンの仕事です。物語の場面転換のように、節の中で話題が変わることを示すには、話題の区切りである <hr> を使います。ブラウザーはこれを横線として描きます。

引用

ほかの資料からの長い引用は <blockquote> に入れます。ブラウザーはこれを字下げして表示します。引用する段落をその中に入れ、出典のアドレスを cite 属性に書くこともできます。文の中の短い引用には <q> を使い、ブラウザーが引用符をつけてくれます。<cite> 要素は、本や映画のような作品の題名に印をつけます。