見出し、段落、リストなどの要素を正しく使う

見出し要素

コンテンツを文書として見た場合、テキスト情報を抜き出してみるとページの構成が良く分かります。見出しには見出し要素を使って記述するようにしましょう。音声ブラウザでは、見出し要素はゆっくりめに読むようになっており、重要な文章であることが伝えやすくなっています。また、情報の多いページでは、見出しだけを読み出していく機能であらかじめ概要を知ることが出来ます。

<h1>見出し　レベル1</h1>
<h2>見出し　レベル2</h2>
<h3>見出し　レベル3</h3>
<h4>見出し　レベル3</h4>
<h5>見出し　レベル3</h5>
<h6>見出し　レベル3</h6>

見出し　レベル1

見出し　レベル2

見出し　レベル3

見出し　レベル3

見出し　レベル3
見出し　レベル3

文字の大きさや太字などの見栄えで表現するのではなく、見出しとしての重要度を表すことで、コンテンツの構造が分かりやすくなる。

段落要素

<p>文章の段落を表現します。</p>

文章の段落を表現します。

改行<br>で行間を空けて見た目で段落を表現するのではなく、文章・段落の区分けを表現することで、見栄えも操作しやすくなる。

リスト要素

<ul>
<li>箇条書き文</li>
<li>箇条書き文</li>
<li>箇条書き文</li>
</ul>

<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
  1. 項目1
  2. 項目2
  3. 項目3
<dl>
<dt>定義文1</dt>
<dd>1の説明文が入ります</dd>
<dt>定義文2</dt>
<dd>2の説明文が入ります</dd>
<dt>定義文3</dt>
<dd>3の説明文が入ります</dd>
</dl>
定義文1
1の説明文が入ります
定義文2
2の説明文が入ります
定義文3
3の説明文が入ります

改行<br>を使って箇条書きのように表現したり、表<table>を使ったために却って複雑な表現になってしまったりすることがあるので、リスト要素の用途を使い分けてシンプルに表現すると、閲覧者にも分かりやすくなる。

リンク要素がつながっている場合

<p>
  <a href="link1.html">メニュー1</a>
  <a href="link2.html">メニュー2</a>
</p>

メニュー1 メニュー2

メニューリストとしての記述した場合

<ul>
<li><a	href="link1.html">メニュー1</a></li>
<li><a href="link2.html">メニュー2</a></li>
</ul>

ナビゲーションとなるメニューは、リスト要素を使って表現されることが多くなっている。これは、メニューリストを表現する、という意味もあるが、リンク要素同士の間に何も区切り文字がないと、音声読み上げ時にメニュー名がすべてつながって読み上げられるため、聞き取りづらくなると共に、該当のリンクで止めてクリックしづらいという問題が生じるため、リスト要素で記述すれば、この問題は解決することができる。

トップに戻る　アイ・クリエイツ　ロゴマーク

©2009 I-Create Corporation.