HTML講座 / 見出しと段落を正しく使う

HTMLの見出しはh1〜h6、段落はpで表します。見出しのレベルは文字の大きさではなく、文書内の階層です。同じ段落内の必要な改行にはbrを使い、段落の区切りとは使い分けます。

見出しで文書の階層を表す

ページ全体の主題をh1、大きな節をh2、その中の話題をh3とするように、親子関係に合わせます。次の二つのh3は同じh2の下位の話題で、次のh2から別の大きな節が始まります。

<h1>Accessibility Guide</h1>
<h2>HTML Structure</h2>
<p>An overview of HTML document structure.</p>
<h3>Heading Levels</h3>
<p>How to organize headings.</p>
<h3>Paragraphs</h3>
<p>How to separate paragraphs.</p>
<h2>CSS Presentation</h2>
<p>How CSS changes the appearance of headings and paragraphs.</p>

小さく見せるためにh2からh4へ飛ぶのではなく、見た目をCSSで調整します。WordPressが投稿タイトルをh1で出力する場合、同じタイトルを本文内で繰り返さず、本文の節はh2から始めます。W3C WAIの見出しの解説でも、階層と内容の対応を確認できます。

ブラウザーで見出しの表示を比べる

次の完全な文書をindex.htmlとして保存して開きます。6段階の見出しを並べた比較用の例であり、実際のページですべてのレベルを使う必要はありません。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Headings and Paragraphs</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
  </body>
</html>

初期状態の文字サイズや余白はブラウザーやCSSで変わります。見出しの一覧だけを読んでも文書の流れが分かるか、内容を別の節へ移したときに親子関係が変わらないかを確認してください。領域の分け方はセマンティック要素によるページ構成と合わせて考えます。

段落はpで分ける

ひとまとまりの内容をpで囲み、話題の区切りで別のpにします。エディターで空行を増やしても、通常のHTML表示で同じ数の空行になるわけではありません。

<p>HTML creates the structure of a web page.</p>
<p>CSS controls its appearance.</p>

このコードは二つの段落です。段落間を広げたい場合はCSSの余白を調整します。pの中に見出しやリストを入れると、ブラウザーが段落を自動的に閉じるなど、意図しない構造になることがあります。

段落内の改行にbrを使う

住所や詩など、同じ文章のまとまりの中で改行位置に意味がある場合はbrを使えます。次の文書では、段落の区切りと段落内の改行を比較します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML Paragraphs and Line Breaks</title>
  </head>
  <body>
    <p>This is the first paragraph.</p>
    <p>This is the first line of the second paragraph.<br>This is the second line of the second paragraph.</p>
  </body>
</html>

画面幅による自動の折り返しは、HTMLに手動改行を書くこととは別です。PCで見た目をそろえるために大量のbrを入れると、スマートフォンでは不自然に短い行になる場合があります。余白を作るための連続したbrも避けます。

飛ばした見出しレベルを修正する

次は誤った階層の断片と修正例です。同じh2の小項目をh3にし、兄弟項目があるときは同じレベルにそろえます。二つの断片は別々に比較してください。

<!-- A skipped heading level -->
<h2>Delivery information</h2>
<h4>Delivery areas</h4>
<!-- A consistent hierarchy -->
<h2>Delivery information</h2>
<h3>Delivery areas</h3>
<h3>Delivery times</h3>

修正前後で文字の大きさが変わっても、判断の基準は内容の関係です。大きさを元に戻したい場合はCSSを使い、見出しレベルを元の誤った値へ戻さないようにします。

見出しと段落の点検

見出しが直後の内容を具体的に説明しているか、空の見出しがないか、段落が一つの中心的な話題を扱っているかを確認します。必要な改行だけにbrを使い、文法はW3Cの検査サービスでも確認できます。ただし、検査だけでは見出しの分かりやすさまでは判断できないため、見出しだけの読み直しも行います。