<ul><li></li></ul>にするメリットって？

<ul><li></li></ul>にするメリットって？


こんにちは。お世話になっています。
色んな方のソースを見ていると、
例えば

「ABOUT」「SERVICE」「COMPANY」・・・という項目を並べる際に


<ul>
<li id="about">ABOUT</li>
<li id="service">SERVICE</li>
<li id="company">COMPANY</li>
</ul>

という風にリスト化する方が多いと思うのですが中には


<div id="contents">
<div class="about">ABOUT</div>
<div class="service">SERVISE</service>
（略）
</div>

という風にdivで括る方もいると思います。
（※私はdivで括るタイプです。）
また。

<dl id="contents">
<dt class="about">ABOUT</dt>
<dt class="service">SERVICE</dt>
（略）
</dl>

という風に<dl><dt></dt></dl>括る方もいると思います。

それぞれのメリットってなんでしょうか？

特に<ul><li></li></ul>という風に括ってる方がおおいと思うので
<ul><li></li></ul>にするメリットが知りたいです。

No.8 回答者： kuzumiHK 回答日時： 2008/07/08 23:40

一般的な感覚として（仕事でhtmlを書く人は別ですが）、

liタグのブラウザ上でのデフォルトの見た目が、
レイアウト時にliタグを使うことへの抵抗感になっているので、
なぜわざわざliタグをという気持ちはよくわかります。

本当は、レイアウトをしていない状態であれば、
divタグでもliタグでも見た目が同じに表示されれば、
誰もが意味のあるタグを使うようになるのだと思いますが、
しかし、レイアウトをしなくても、
最低限、何のタグで囲われているか（どういう意味なのか）が、
一目でわかるようにブラウザが下手くそなレイアウトで
表現してくれている？わけです。

そういったわけで、まずは、divタグをやめて、
ulタグとliタグでくくって、
margin:0;padding:0;list-style:none;したら、
それをdivでくくったものと思って、
レイアウトするところからはじめると、
意外とあっさりと抵抗感なく、
htmlの世界へようこそとなるかもしれません。

No.7 回答者： caz04 回答日時： 2008/07/08 13:20

メリット云々ではなく、文章構造の問題です。

<div>タグはまとまったブロック要素としてくくる場合に使用します。
なので一つの単語や段落をくくるには普通は<span>や<p>タグなどを使います。
この場合は<div>でくくるより、<p>のほうが適切です。


<ul><li>は重みの同じ複数要素を箇条書きにする場合に使います。
また、入れ子にも出来るので、階層表現も出来ます。
（大項目の中の中項目、小項目といった表現が出来ます。）
そのため、<p>よりもメニュー(目次)としての用途に合っている為、よく使われ、文章構造的にも適切で、メニューであることがわかりやすくなります。

一般的な書籍を考えて下さい。
目次は目次としてのレイアウト、書式となっており、見出しは見出しの書式、デザインであり、本文は本文としてデザインしてあります。
それぞれを同じくくりにしないのと同じで、HTMLもタイトル、目次(メニュー)、見出し、本文とそれぞれ定義し、それぞれのスタイルを適用することが本来の文章としての構造です。
そのためにいろいろなタグが定義されており、使い分けます。


ちなみに<dl>は定義リストで<dt>で項目、<dd>でその内容や意味、説明を記述し、<dt>、<dd>はセットで使われます。
そのため、この場合は間違った使い方になります。
もし、メニューで使うとすると、

<dl id="contents">
<dt class="about">ABOUT</dt>
<dd class="aboutInfo">このサイトについてご紹介します。</dd>
<dt class="service">SERVICE</dt>
<dd class="serviceInfo">当社ではこのようなサービスを行っています。</dd>
（略）
</dl>

というような場合には適します。


メリット云々ではなく文章構造として適切であるかどうかです。

No.6 回答者： DrFell 回答日時： 2008/07/07 20:17

逆になぜdivにするのか聞きたいですね。

箇条書きにはul・liがルールです。

箇条書きの意味だからul/liにします。
何かを定義するなら<dl><dt></dt></dl>ですね。この場合何の定義ですか？

私はdivは意味付けができないけど、ひとかたまりですという意味のない要素をくくるときに使う物ですよね？メリットデメリットでなく適したタグで意味付けしているだけです。

デザインから入ると意味もなくdiv多様、無意味に重複の方多いですね。意味わかって使っていないで猿真似小僧ってやつですね。

No.5 回答者： noname#66720 回答日時： 2008/07/07 19:12

liで記述しておけば、HTMLを理解できる環境であればそれをリストとして取り扱ってくれるからだと私は思います。

リストは共通性を持つ情報を束ねるような要素だと私は解釈しているのですが、例えばメニューだと1つ1つ独立した関連のない要素としてマークアップするよりは、リスト等を利用してやるほうが実際に様々な状況を想定した場合都合が良いです。
(ブラウザの見た目1つとっても、CSSオフの環境でも最低限の見た目や機能はブラウザが保障してくれます。)

ちょっとそれたことを書きますが、divは確かに構造化(この場合はメニューを括る)に利用することはできますが、ほとんどの文章では必要ないと思います。

<div id="contents">
<div class="about">ABOUT</div>
<div class="service">SERVISE</div>
（略）
</div>

よりは


<div id="contents">
<p class="about">ABOUT</p>
<p class="service">SERVISE</p>
（略）
</div>

のほうが適切だと思いますし、前述したように普通のナビゲーションであればdivの構造化は必要なくなるので自然と


<ul id="contents">
<li class="about">ABOUT</li>
<li class="service">SERVISE</li>
（略）
</ul>

になってしまうのではないでしょうか。

No.4 回答者： yambejp 回答日時： 2008/07/07 18:09

XMLって構造を定義する言語ですよ

並列の要素をリスト表示するなら、やはりul、liをつかってください。
本件に関してはdivを使うのはあまりおすすめできません。
またdl、dt、ddのように用語を定義するタグをリストやメニューにつかう
という発想はとても恥ずかしいソースになるのでやめた方がいいでしょう。

No.3 回答者： Tinte 回答日時： 2008/07/07 18:04

　htmlがxmlとの互換性をもってxhtmlというものになってから、単にデータ構造の問題がリストタグのメリットになっているのだと思います。

　実際、データ上の問題ではメリットが全くありません。というのは、xmlはタグが構造化していれば、自由に設定が可能なんです。
<menu>
<about>About</about>
<service>Service</service>
<company>Company</company>
</menu>
xmlではこんなこともできます。しかしhtmlにはこんなタグがなので、慣例上<ul><li></li></ul>を使っているのだと思います。

　メリットをかなり強引に探してみると、このようなリストタグを使っている人が多いということで、何かと使いやすいということはなっていると思います。（一応xml上の構造もキープしているし…。）みんながそうしているのでメンテナンスもしやすいし。
　現在のところきちんとした理由のメリットはありませんが、データはhtmlにしろxmlにしろ入れ子にしてきちんと終了タグを付けてゆく…っていうことで一応のデータにはなるということになっていますよ。

No.2 回答者： torisabure 回答日時： 2008/07/07 18:02

<ul><li></li></ul>だとすぐどこからどこまでがリストが

わかりやすい。

divでくくるとどこからどこまでリストかわかりにくい。
また<ul><li></li></ul>でまとめた場合cssでくくりやすい。

No.1 回答者： naktak 回答日時： 2008/07/07 18:01

http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401 …
ul, ol, liはリストですが、dl, dt, ddはリストの中でも、定義とその内容
を組み合わせて利用するような形になるようです。

http://www.asahi-net.or.jp/~SD5A-UCD/rec-html401 …
逆にdivなどは、要素の区切りを表すものですから、例でいえば
<div id="contents"></div>が1つの区切りであり、ABOUT、SERVICEなどは
区切る必要がない気がします。