「div」の代わりに「li」を使用する必要があるのはなぜですか?


114

アイテムを一覧表示するときにul-liを使用する必要があるのか​​、divを使用する必要があるのか​​がわかりません。両方をまったく同じに見えるようにできるので、順序付けられていないリストを作成することとdivを整列することの機能的な利点はどこですか?


1
素晴らしい質問。しばらく探していました。以下にいくつかの合理的な答えがあることを願っています。
runios

回答:


148

意味の正確さのため。HTMLにはリストを表現する機能があり、Googleロボット、スクリーンリーダー、およびサイトの表示だけに関心がないあらゆる種類のユーザーがコンテンツをよりよく理解するのに役立ちます。


4
+1。視覚障害者にとっては、リストにあるものとそうでないものを区別すると役立つ場合があります。たとえば、レシピに材料のリストがあり、ユーザーが指示にスキップするか、単にリストを読みたい場合は、リストが必要だとしましょう。
デイブマークル

+1。zsharp:あなたは自分で「アイテムをリストするとき」と言います。それらをリストに追加するときに、リストアップします。
Arve Systad 2009

3
@Arve。私のポイントは、「リスト」という名前にもかかわらず、機能の違いを理解することでした。Oteherwiseで私は私が理解しなかった規則に従います。
zsharp 2009

2
しかし、昔は(そしておそらくまだ)、各ブラウザーは、間隔やマージンなどの要素をリストするための独自の小さなフォーマットを追加したため、多くの人がdivの使用を好むのはそのためです。なぜなら、フォーマットをゼロにするためにコードの束を追加したり、ブラウザを検出したりする必要はないためです。これらのわずかな違いは、ページレイアウトを壊し、画像の「スライス」の間に白い線を入れたり、アイテムを他のアイテムの下にぶつけたりするような醜いことをします。
AwokeKnowing、2015年

プロのフロントエンド開発者がいるため、実際@AwokeKnowing、CSSのリセットプロジェクトはprecicely軍団ある書式設定からゼロにコードの束を追加したいです。それらは、すべてのブラウザのデフォルトスタイルを既知の「スタイルのない」ベースに「リセット」します。
joshperry 2015

132

なぜアイテムを一覧表示するときにul-liを使用する必要があるのか​​、単にdivを使用する必要があるのか​​わかりません。両方まったく同じに見えるようにすることができます

あなたの質問にキーワードがあること:「見る」。点字リーダーを使用している視覚障害者でも同じように入力できますか?テキスト読み上げシンセサイザーを使用して、視覚障害者が同じように聞こえるようにできますか?あなたはすることができ、まだ彼らは、カスタムクライアント側のCSSのユーザースタイルシートを使用して視覚障害者のために同じことを見えるように?

その「見回す」という言葉は非常に危険な言葉です。HTMLに関連してそれを使用すると、すべてのアラームが頭の中で鳴るはずです。HTMLは、ハイパーメディアドキュメントのセマンティック構造を記述するための言語です。意味構造はありません持っている、それは抽象的な概念だ、「見て」。

このセマンティックホカスポカスのすべてを気にせず、目の不自由な人を気にしない場合でも、次の点を考慮してください。Google、Yahoo、MSN、Co。には目がなく、レンダリングされたCSSを「見て」いない。


2
私は「見た目」という用語を使用して、根本的な違いに到達するポイントを強調しました。それでもあなたの哲学は高く評価されています。
zsharp 2009

17

意味的に正しいマークアップを使用することにより、テキストに追加情報を埋め込みます。ul / liを使用することで、情報がリストであり、任意の要素内のテキストである「何か」(何を知っているか)だけではなく、消費アプリケーションに通信します。


15

あなたの質問への直接の答え:機能的な利点は、divはそれ自体ではほとんど意味がないということですが、ul lis明示的に「これは項目の順序付けられていないリストです」という意味です。

「セマンティクス」という用語は、既存の構造の固有の意味を使用して明示的な意味を作成する方法を指します。HTMLは、それ自体が特定のことを意味するタグで構成されています。そして、それらを使用するための確立されたルール/ガイドライン/方法があり、公開されたHTMLドキュメントがあなたがそれが意味することを伝えます。

ドキュメントに何かをリストする場合は、順序付きリスト(UL)または順序なしリスト(OL)を追加します。一方、ページ分割(DIV)要素は、特定の個別のコンテンツを作成するために使用されます。

div要素「分裂」。ページを見ると、コンテンツ本文、フッター、ヘッダー、ナビゲーション、メニュー、フォームなどの特定の部分があります。また、divタグを使用してこれらの区分を作成できます。多くの場合、ページパーツは視覚的なレイアウトに対応しているため、明示的なページ分割(DIV)を使用して、CSSでレイアウトを分割するのが自然です。これにより、divタグが構造化されます。

divタグを誤用または乱用すると、意図しない意味とコードの肥大化を引き起こす可能性があります。

問題を混乱させる:Googleはh3divを使用して、リストされた検索結果を「分割」します。ul> li> h3 + div

あなたはすべてのスタイル(/ WebDeveloperツールバーワットFirefoxでShiftキー+ Cmdを/もしくはCtrl + S)を切るときに、div要素が離れて行く必要があり、自然にスタック。ネイキッドHTMLは、上から下へ、最も重要なコンテンツを最初に、リストに項目の箇条書きと番号を付けたリストのように、明確な階層を持つ見栄えの良いページをレンダリングします。また、メインコンテンツ、重要なフォーム、またはメインの見出し(目次など)にスキップできるリンクを上部(非ビジュアルユーザー向け)の近くに追加することをお勧めします。

最後に、ドキュメントを作成していることを覚えておいてください。すべての視覚効果がなくても、それはまともな文書であるはずです。


6

使用<li>または使用について多くの話がありますが、<div>これらのタグの内側に入るコンテンツの確かな例を示すコメントはありません。私が実際にウェブサイト、新聞、または雑誌で物事の「リスト」を実際に読んだとき、オンラインまたは印刷物で読んだとき、あなたにそれを伝えることができないので<ul>、私の気持ちは<li>それほど重要ではありません。

<div>はるかに用途が広いです。あなたがケーキの材料をリストアップしているなら、はい、それはリストです。あなたがハイキング旅行のために詰めるために物をリストアップしているなら、はいそれはリストです。

しかし、たとえば、実際にはリストでも、一連の段落でも、すべての「ヘッダー」でもないいくつかのランダムなものをリストするユーザーフォームについてはどうでしょう。一部は日付、一部はチェックボックス、一部はテキストです。あなたが私に尋ねたら、それを分割してください。それはでマークアップされた場合、ブラインドの人が誤って知らさだろう<ul><li>、彼らは「ここのリストがある...」それは本当に、リストのものだけホッジ-podgeないときに聞きました。


特に階層がある場合、ナビゲーションメニューはアクセスできるページのリストと見なされませんか?
スコットM.シュトルツ

4

内部に配置するコンテンツには適切なタグを使用する必要があります。これは、ul / liがリストにとってより適切であることを意味するだけではありません。これは、リストの内容を検討して、そのリストが順序付けられていない/順序付けられているか、定義リストであるかを確認する必要があることも意味します。

別の引数は、cssを無効にする場合です。ブラウザは、デフォルトのスタイルをレンダリングします。これにより、代替のブラウジングデバイスが使用されているかどうかを確認しやすくなります。また、アクセシビリティも向上します。


4

代わりにdivを使用すると、lynxはページを読みやすい方法でレンダリングできません。


3

私は個人的にセマンティクスのための李が好きです。ソースを表示すると、liでラップされている場合、何かのリストがあることがすぐにわかります。divコレクションはセマンティックな意味を提供しません。通常、リストに対する唯一のセマンティクスは、「listItem」のようなcssクラスによって導入されます。これは明らかに、最初に李が使用されるべきだったという事実を示しています。

プレゼンテーションロジックにループがある場合は、divよりも常にliを優先します。


4
同意する。私は実際に<div class = "ul"> <div class = "li"> ... </ div> </ div>を一度見ました、そして私が集めることができる最も一貫した考えは「WTF ?? !! ?? !! !?!」
イェルクWミッターク

3

<li>はリスト内のアイテムを意味し、パーサー(ブラウザ、検索エンジン、スパイダー)がアイテムをリストしていることを認識できます。LIの代わりにDIVを使用できますが、これらのパーサーはそれらの項目がリストされていることを決して認識せず、DIVはブロックであること以外は何も記述しません。


3

プロジェクトによって異なります。私は最近、リストを使ってメニューをデザインするプロジェクトをしました。彼らは、スライド/フェードのような一連のエフェクトを追加したかったし、複数のレベルで折りたたみ可能にしたかった。

この場合、DIVの方がはるかに適していました。子divのコンテナーを作成し、jQueryを適用して目的の効果を達成することができました。

プロジェクトにまだこれらの要件がない場合でも、将来どのように変更するかを考えることは賢明かもしれません...


2

<li>(適切な場合)を使用すると、<div>Webページに頻繁に表示されるタグスープが削減されるため、開発者にとって非常に役立ちます。

それ<div>は悪いことではありませんが、タグが過度に使用さ<div>れると(よくあることですが)、タグのセマンティックな意味が完全に役に立たなくなるほど希釈されます。私は最近、WebアプリのCSS / UIを支援するために雇った請負業者からこれを学びました。HTMLコードの可読性/保守性にもたらされた違いは、私には非常に顕著です。


2

あなたが気にすべてのリストは最小限の労力で特定の方法を探すようになっている場合、これは、すでに非常に簡単ではありません:<li>1つの文字少ないタイプに比べて<div> その閉じタグはHTMLでオプションです。

そして、それはセマンティクスについて他の誰もが言ったことに加えてです。



2

あなたの質問にはすでに2セントを追加したいので、ここで答えます。私はバックエンドロジックを実行しているプロジェクトで作業しており、私のデータはデザイナーが作成したページテンプレートに集約されていました。彼はulおよびliタグを使用して、ページ上のあらゆる種類のリストを表しました。それらのリストの一部はウィジェットでした。データは、ユーザーがHTMLタグを介してリッチテキストを入力できるcmsから送られてきました。ユーザーがコンテンツでリストの作成を開始したとき、リストは箇条書きのリストのように見えなくなり、ページ全体がめちゃくちゃになりました。

教訓:コンテンツ自体にhtmlを含めることができる場合は、汎用CSSセレクターでリストタグを使用しないでください。


0

ul liのもう1つは、ulをStyleクラスの設定に役立つコンテナとして使用できます

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

私はulを使用するときにこのパターンが好きです

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

もちろん、それは私たちがそれをどのように使いたいか、そして私たちがそれをどのように好きかによって異なります。これは私が好きな方法です

希望は感謝を助ける


3
divもコンテナーとして使用できます
Janning

3
すみません@Barbaros myHebeはどういう意味ですか?
セブキ2012年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.