その7　見出しなど適切な要素を用いて文書構造を規定する

　ユーザーは見出しを拾い読みすることでページ全体の内容や構造を判断し、必要な情報をたどります。そのためウェブコンテンツは、見出し、段落、リストなどの要素を用いて、論理的に文書構造を規定しなければなりません。

　どのような文書でも章・節・項といった見出しや、段落、表などにより構成されています。HTML（XHTML）ではそのような文書の構造に応じて、見出し（h1〜6）、段落（p）などの要素が用意されています。文書構造を規定するとはつまり、文書構造に従って適切な要素を用いてマークアップするということです。

文書構造を規定する意義

　HTMLで文書構造が適切にマークアップされていなくても、健常者であればレイアウトや文字の大きさなどから視覚的に見出し等の文書構造を判断できるかもしれません。しかし例えば視覚障害者等、音声ブラウザのユーザーは視覚的に情報を得ることができないため、文書の構造を判断することが困難になります。

　そのためHTMLで適切にマークアップして、音声ブラウザに文書構造が伝わるようにしておくことが必要になります。それにより音声ブラウザは、見出しの部分ではゆっくり読み上げるなどして文書構造をユーザーに伝えることができ、また、ユーザーは見出しだけを読み上げたり、リストだけを読み上げたりする機能を使って、効率よく情報をたどることができるのです。

文書構造を規定されたコンテンツの例

HTML
<h1>東海総合通信局ホームページ</h1>
<h2>報道発表資料</h2>
<h3>不法無線局の路上取り締まりを実施</h3>
<p>　東海総合通信局は、本日、・・・（中略）・・・取り締まりを実施しました。<br>　その結果は下記のとおりです。</p>
<h4>概要</h4>
<p>　今回、不法無線局を開設していた・・・（中略）・・・摘発しました。</p>
<h4>被疑者の概要及び不法無線局の種別、局数</h4>
・・・

ポイント1　見出し要素を用いて記述する

h1〜h6要素（見出し）

　見出し要素は、その階層に従って1〜6段階に分けられます。最も大きな見出しにh1、中見出しにh2、小見出しにh3・・・のように順番に用います。h1要素が無いのにいきなりh2要素が現れたり、h1要素のあとに（h2要素を飛ばして）h3要素が現れることがないように、適切に階層付けを行う必要があります。

図1：見出しの包含関係の概念図（例）

　なお、一般的なブラウザでは、見出し要素に対して文字を大きくしたり中央寄せや太字といった見た目の効果を施して表示しますが、このような見た目の効果のみを目的として見出し要素を使用しないでください。

ポイント2　段落要素、リスト要素を用いて記述する

p要素（段落）

ひとつの段落（paragraph）であることを表すには、p要素を用います。
ちなみに一般的なブラウザではp要素の前後に1行文のスペースが確保されますが、単に改行目的で使用する場合は<p>タグでなく<br>タグを用います。また、行間のスペースをとりレイアウトを整えるために、段落や改行を連続することは文法的に推奨されていません。

ol要素（数字付きリスト）、ul要素（数字なしリスト）

内容的に並列関係になる複数の箇条書き形式の項目（見出しを除く）は、基本的にリストを用います。
使用例
・・・（略）・・・
<h3>対象地域</h3>
<ul>
　<li>名古屋市</li>
　<li>北名古屋市</li>
　<li>一宮市</li>
</ul>

dl要素（定義リスト）

<dl>〜</dl>の間に、<dt>〜</dt>で定義する用語を、<dd>〜</dd>で用語説明します。
使用例
<dl>
<dt>アウトソーシング</dt>
<dd>組織内で行ってきた業務を外部委託することによって効率化を図る経営手法。</dd>
</dl>

ポイント3　強調、引用などの構造を表す代表的な要素を理解する

強調

• em要素：テキストを強調する際に使用します。代表的なブラウザでは斜体で表示されます。
• strong要素：テキストをより強調する際に使用します。

なお、b要素（太字）、i要素（斜体）は文書構造を表すのではなく視覚的な効果を作り出すための要素ですので、使用しない方が良いとされています。

引用

• q要素：引用を表します。（インライン要素）
• blockquote要素：引用を表します。（ブロックレベル要素）

なお、blockquote要素を用いる場合、多くのブラウザではその箇所がインデントされて表示されますが、（引用の目的でなく）インデントのみの目的で使用しないでください。

　ここでは特に代表的な要素を紹介しましたが、このほかの要素についてもHTML(XHTML)の仕様をよく理解し、文書構造を正しく規定しましょう。