CYBER@GARDEN

home > Web::Blogoscope > リストに見出しをつける方法

Web::Blogoscope

リストに見出しをつける方法

リストの見出しをどうつけるかは、簡単なようでわりと奥深い問題だ。以下、一般的な方法とその問題点を見たあと、突っ込んだ方法と応用例を説明しよう。

一般的な方法

リストに見出しをつけるには、h1h6要素を利用するのが最も一般的だ。

<h2>カテゴリー</h2>
<ul>
  <li>Webトレンド</li>
  <li>ブログトレンド</li>
  <li>ポータルトレンド</li>
</ul>

しかし、この見出しは、リストに対してつけられているというよりは、ページ全体の文脈上の存在といえる。書式上は全く問題ないが、見出しとリストが直接結びつけられているわけではない。

突っ込んだ方法

dl要素(定義型リスト)を使って、見出し情報とリストを直接結びつけることができる。

<dl>
  <dt>カテゴリー</dt>
  <dd>
    <ul>
      <li>Webトレンド</li>
      <li>ブログトレンド</li>
      <li>ポータルトレンド</li>
    </ul>
  </dd>
</dl>

このように、dt要素に見出し情報を、dd要素にリストを含める。

あるいは、Jeffrey Zeldmanのサイトのように、

<dl>
  <dt>カテゴリー</dt>
  <dd>Webトレンド</dd>
  <dd>ブログトレンド</dd>
  <dd>ポータルトレンド</dd>
</dl>

と、ひとつのdt要素に複数のdd要素を対応させる方法もある。

番号リストはどうする?

番号リストの場合も、dl要素を利用して見出し情報とリストを対応させることができる。

<dl>
  <dt>好きなカニの種類</dt>
  <dd>
    <ol>
      <li>タラバガニ</li>
      <li>ズワイガニ</li>
      <li>花咲ガニ</li>
    </ol>
  </dd>
</dl>

ほかの要素にも応用できる?

もちろんできる。たとえばblockquote要素を考えてみよう(単純化のために属性は省略)。

<dl>
  <dt>
    <cite>益子 貴寛『Web標準の教科書』p.540</cite>
  </dt>
  <dd>
    <blockquote>
      <p>ただし、人間であれば知識や経験によって判断できることでも、
      コンピュータなどのマシンが判断するには何らかの仕組みが必要で
      ある。つまり、メタデータをマシンにも利用可能なかたちで表現す
      ることではじめて、検索や推論などの処理をマシンに代行させるこ
      とができることになる。</p>
    </blockquote>
  </dd>
</dl>

このように、dt要素に見出し情報として引用元を、dd要素にblockquote要素を含める。

また、ソースコードを示すのであれば、dt要素に見出し情報を、dd要素にpre要素を含めればよいだろう。

dl要素のちょっとした注意

このように、dl要素は、ある内容と他の内容を直接的に結びつけるのに利用できる。ただし、子要素であるdt要素はインライン要素であり、テキストや他のインライン要素を含むことができるが、ブロックレベル要素は含むことができない点に注意が必要だ。

つまり、次のようなdt要素とdd要素の内容モデルを逸脱することはできない。

<dl>
  <dt>(テキスト/インライン要素)</dt>
  <dd>(テキスト/インライン要素/ブロックレベル要素)</dd>
</dl>

まとめ

table要素にはcaption要素が用意されているので、見出しをどうつけるか迷うことはほぼない。しかし、他のブロックレベル要素には直接的な見出しをつける手段が与えられていないので、dl要素を利用するしかないというボキャブラリ上の制約がある。

個人的には、文脈上の見出しとしての役割を部分的にでも備えているのであれば、普通にh1h6要素を利用し、あるブロックレベル要素に対する個別的な見出しを指定する場合だけdl要素を利用すればよいと考えている。

Posted on 2005-11-09T22:58+09:00 | Category: Web標準

トラックバックPings

トラックバックのURI:
http://www.cybergarden.net/mt/mt-tb.cgi/245

コメント

« Google Adsenseの紹介プログラム | ブログトップ | パーソナライズドポータル考 »