回答:
意味の正確さのため。HTMLにはリストを表現する機能があり、Googleロボット、スクリーンリーダー、およびサイトの表示だけに関心がないあらゆる種類のユーザーがコンテンツをよりよく理解するのに役立ちます。
なぜアイテムを一覧表示するときにul-liを使用する必要があるのか、単にdivを使用する必要があるのかわかりません。両方をまったく同じに見えるようにすることができます
あなたの質問にキーワードがあること:「見る」。点字リーダーを使用している視覚障害者でも同じように入力できますか?テキスト読み上げシンセサイザーを使用して、視覚障害者が同じように聞こえるようにできますか?あなたはすることができ、まだ彼らは、カスタムクライアント側のCSSのユーザースタイルシートを使用して視覚障害者のために同じことを見えるように?
その「見回す」という言葉は非常に危険な言葉です。HTMLに関連してそれを使用すると、すべてのアラームが頭の中で鳴るはずです。HTMLは、ハイパーメディアドキュメントのセマンティック構造を記述するための言語です。意味構造はありません持っている、それは抽象的な概念だ、「見て」。
このセマンティックホカスポカスのすべてを気にせず、目の不自由な人を気にしない場合でも、次の点を考慮してください。Google、Yahoo、MSN、Co。には目がなく、レンダリングされたCSSを「見て」いない。
あなたの質問への直接の答え:機能的な利点は、divはそれ自体ではほとんど意味がないということですが、ul lis明示的に「これは項目の順序付けられていないリストです」という意味です。
「セマンティクス」という用語は、既存の構造の固有の意味を使用して明示的な意味を作成する方法を指します。HTMLは、それ自体が特定のことを意味するタグで構成されています。そして、それらを使用するための確立されたルール/ガイドライン/方法があり、公開されたHTMLドキュメントがあなたがそれが意味することを伝えます。
ドキュメントに何かをリストする場合は、順序付きリスト(UL)または順序なしリスト(OL)を追加します。一方、ページ分割(DIV)要素は、特定の個別のコンテンツを作成するために使用されます。
div要素「分裂」。ページを見ると、コンテンツ本文、フッター、ヘッダー、ナビゲーション、メニュー、フォームなどの特定の部分があります。また、divタグを使用してこれらの区分を作成できます。多くの場合、ページパーツは視覚的なレイアウトに対応しているため、明示的なページ分割(DIV)を使用して、CSSでレイアウトを分割するのが自然です。これにより、divタグが構造化されます。
divタグを誤用または乱用すると、意図しない意味とコードの肥大化を引き起こす可能性があります。
問題を混乱させる:Googleはh3とdivを使用して、リストされた検索結果を「分割」します。ul> li> h3 + div
あなたはすべてのスタイル(/ WebDeveloperツールバーワットFirefoxでShiftキー+ Cmdを/もしくはCtrl + S)を切るときに、div要素が離れて行く必要があり、自然にスタック。ネイキッドHTMLは、上から下へ、最も重要なコンテンツを最初に、リストに項目の箇条書きと番号を付けたリストのように、明確な階層を持つ見栄えの良いページをレンダリングします。また、メインコンテンツ、重要なフォーム、またはメインの見出し(目次など)にスキップできるリンクを上部(非ビジュアルユーザー向け)の近くに追加することをお勧めします。
最後に、ドキュメントを作成していることを覚えておいてください。すべての視覚効果がなくても、それはまともな文書であるはずです。
使用<li>
または使用について多くの話がありますが、<div>
これらのタグの内側に入るコンテンツの確かな例を示すコメントはありません。私が実際にウェブサイト、新聞、または雑誌で物事の「リスト」を実際に読んだとき、オンラインまたは印刷物で読んだとき、あなたにそれを伝えることができないので<ul>
、私の気持ちは<li>
それほど重要ではありません。
<div>
はるかに用途が広いです。あなたがケーキの材料をリストアップしているなら、はい、それはリストです。あなたがハイキング旅行のために詰めるために物をリストアップしているなら、はいそれはリストです。
しかし、たとえば、実際にはリストでも、一連の段落でも、すべての「ヘッダー」でもないいくつかのランダムなものをリストするユーザーフォームについてはどうでしょう。一部は日付、一部はチェックボックス、一部はテキストです。あなたが私に尋ねたら、それを分割してください。それはでマークアップされた場合、ブラインドの人が誤って知らさだろう<ul>
と<li>
、彼らは「ここのリストがある...」それは本当に、リストのものだけホッジ-podgeないときに聞きました。
内部に配置するコンテンツには適切なタグを使用する必要があります。これは、ul / liがリストにとってより適切であることを意味するだけではありません。これは、リストの内容を検討して、そのリストが順序付けられていない/順序付けられているか、定義リストであるかを確認する必要があることも意味します。
別の引数は、cssを無効にする場合です。ブラウザは、デフォルトのスタイルをレンダリングします。これにより、代替のブラウジングデバイスが使用されているかどうかを確認しやすくなります。また、アクセシビリティも向上します。
私は個人的にセマンティクスのための李が好きです。ソースを表示すると、liでラップされている場合、何かのリストがあることがすぐにわかります。divコレクションはセマンティックな意味を提供しません。通常、リストに対する唯一のセマンティクスは、「listItem」のようなcssクラスによって導入されます。これは明らかに、最初に李が使用されるべきだったという事実を示しています。
プレゼンテーションロジックにループがある場合は、divよりも常にliを優先します。
あなたが気にすべてのリストは最小限の労力で特定の方法を探すようになっている場合、これは、すでに非常に簡単ではありません:<li>
1つの文字少ないタイプに比べて<div>
とその閉じタグはHTMLでオプションです。
そして、それはセマンティクスについて他の誰もが言ったことに加えてです。
あなたの質問にはすでに2セントを追加したいので、ここで答えます。私はバックエンドロジックを実行しているプロジェクトで作業しており、私のデータはデザイナーが作成したページテンプレートに集約されていました。彼はulおよびliタグを使用して、ページ上のあらゆる種類のリストを表しました。それらのリストの一部はウィジェットでした。データは、ユーザーがHTMLタグを介してリッチテキストを入力できるcmsから送られてきました。ユーザーがコンテンツでリストの作成を開始したとき、リストは箇条書きのリストのように見えなくなり、ページ全体がめちゃくちゃになりました。
教訓:コンテンツ自体にhtmlを含めることができる場合は、汎用CSSセレクターでリストタグを使用しないでください。
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
もちろん、それは私たちがそれをどのように使いたいか、そして私たちがそれをどのように好きかによって異なります。これは私が好きな方法です
希望は感謝を助ける