1. Home
  2. Archive
  3. 定義リストより見出しでマークアップする理由

定義リストより見出しでマークアップする理由

コーディングしていてよく、定義リスト（dl）でマークアップするか見出し（h1～h6）でマークアップするのか迷うときがあります。昔は結構定義リストを使ってマークアップすることが多かったのですが、最近は明らかに定義リストのほうが妥当というとき意外は見出しでマークアップするようにしています。

一番の理由としては、見出しでマークアップすると音声ブラウザで閲覧した際に見出しジャンプができるという点です。音声ブラウザのユーザーは結構見出しジャンプの機能を使ってブラウジングするらしいので、アクセシビリティの面で定義リストより見出しのほうがよいと思います。

それと、定義リスト（語彙の説明）ということを考えると結構矛盾してるマークアップになってしまうときがあります。フォームなどはよく定義リストを使ってマークアップしていたのですが、定義リスト本来の使い方ではないなぁと思いながらマークアップしてたものです。（このブログのコメントフォームは定義リストだけど・・・）

先日CSS HappyLife主催で行われたコーディングコンテスのグランプリの作品ですが、最新製品情報のところは定義リストでマークアップされています。実は僕もここは定義リストでマークアップしたんですが、今思えばここは見出しでマークアップしたほうがよかったんじゃないかと思っています。もちろん定義リストでも間違えではないと思いますが。ちなみに参加者のデータをざっと眺めてみると、定義リストより見出しでマークアップしてる人のほうが多いようでした（全部見たわけじゃないですが）。

コンテストの製品情報のところを定義リストでマークアップする場合はこんな感じ。

<dl>
  <dt><a href="#">HappyLifeマシン</a></dt>
  <dd>
    <p>製品説明製品説明製品説明製品説明製品説明。</p>
    <p>製品説明製品説明製品説明製品説明製品説明。</p>
  </dd>
</dl>

見出しでマークアップするとこう。

<div>
  <h3><a href="#">HappyLifeマシン</a></h3>
  <p>製品説明製品説明製品説明製品説明製品説明。</p>
  <p>製品説明製品説明製品説明製品説明製品説明。</p>
</div>

どっちが正解かっっていうのはないかもしれないですけど、人それぞれ一貫した考え方をもってやればいいんじゃないかと僕は思っています。最近は見出しか定義リストか迷うな～なんて思いながらマークアップしてるとき楽しいんですよね。CSS書いてるとIEのせいでストレスがたまってしょうがないので。

トラックバックURL

http://webtech-walker.com/archive/2007/08/30113217.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。

コメントフォーム

※HTMLタグは使用できません。