「div」の代わりに「li」を使用する必要があるのはなぜですか？
Ul-liを使用する必要があるのか、アイテムをリストするときに単にdivを使用する必要があるのかはわかりません。両方をまったく同じように見せることができますが、順序付けられていないリストを作成することとdivを並べることの機能上の利点はどこにありますか？
意味の正確さのため。 HTMLにはリストを表現する機能があり、Googleロボット、スクリーンリーダー、およびサイトのプレゼンテーションだけに関心のないあらゆるユーザーがコンテンツをよりよく理解するのに役立ちます。
Ul-liを使用する必要があるのか、アイテムをリストするときに単にdivを使用する必要があるのかがわかりません。 lookをまったく同じにすることができます
あなたの質問に「見なさい」という重要な言葉があること。点字リーダーを使用している視覚障害者でも同じようにtypeにすることはできますか？それらをsoundにすることはできますか？ stillカスタムのクライアント側CSSユーザースタイルシートを使用して、視覚障害者向けに同じように見せることはできますか？
この「見た目」という言葉は非常に危険な言葉です。これをHTMLに関連して使用すると、すべてのアラームが頭の中で鳴ります。 HTMLは、ハイパーメディアドキュメントの意味構造を記述するための言語です。セマンティック構造はhave「外観」ではなく、抽象的な概念です。
このセマンティックホカスポカスを気にせず、視覚障害者を気にしない場合でも、次のことを考慮してください。Google、Yahoo、MSN、およびCo.には目がありません。 。
意味的に正しいマークアップを使用することにより、テキストに追加情報を埋め込みます。 ul/liを使用することで、情報がリストであり、任意の要素内のテキストである「何か」（何を知っているか）だけではなく、消費アプリケーションに通信します。
あなたの質問への直接的な答え：機能的な利点は、divsはそれ自身ではほとんど意味がありませんが、l lisは明示的に「これはアイテムの順序なしリストです」ということです。
「セマンティクス」という用語は、既存の構造に固有の意味を使用して明示的な意味を作成する方法を指します。 HTMLは、特定のことを意味するタグで構成されています。そして、それらを使用するための確立されたルール/ガイドライン/方法があり、公開されたHTMLドキュメントがあなたがそれが意味することを伝えます。
文書に何かをリストする場合は、順序付きリスト（UL）または順序なしリスト（OL）を追加します。一方、ページ分割（DIV）要素は、特定の個別のコンテンツを作成するために使用されます。
div要素は「分割する」。ページを見ると、コンテンツ本文、フッター、ヘッダー、ナビゲーション、メニュー、フォームなどの特定の部分があります。そして、divタグを使用してこれらの区分を作成できます。多くの場合、ページパーツは視覚的なレイアウトに対応しているため、明示的なページ分割（DIV）を使用してCSSでレイアウトを分割するのが自然です。このようにして、divタグは構造的になります。
divタグを誤って使用したり使いすぎたりすると、意図しない意味とコードの肥大化を引き起こす可能性があります。
問題を混乱させるために：Googleはhおよびdivを使用して、リストされた検索結果を「分割」します。 l> li> h3 + div
したがって、すべてのスタイル（Firefox w/WebDeveloperツールバーのShift + Cmd/Crtl + S）をオフにすると、divsは消え、自然にスタックするはずです。裸のHTMLでは、上から下へ、最も重要なコンテンツが最初に、リストされたアイテムの箇条書きと番号が付いたリストという、明確な階層を持つNiceページをレンダリングするはずです。また、メインコンテンツ、重要なフォーム、またはメインの見出し（目次など）までスキップできるリンクを（視覚以外のユーザー向けに）上部近くに追加することをお勧めします。
最後に、ドキュメントを作成していることに注意してください。すべての視覚効果がなければ、それはまだ説得力のあるドキュメントであるはずです。
<li>の使用または<div>の使用について多くの話がありますが、これらのタグの内部に含まれるコンテンツの堅実な例はありません。私は、<ul>と<li>は、ウェブサイト、新聞、または雑誌で物事の「リスト」を実際に最後に読んだことをあなたに伝えることができないので、本当に重要ではないと思います。印刷します。
<div>ははるかに汎用性があります。ケーキの材料をリストしている場合、それはリストです。あなたがハイキング旅行のために荷物に入れて物をリストしているなら、はい、それはリストです。
しかし、たとえば、実際にはリストでも、一連のパラグラフでも、すべての「ヘッダー」でもないランダムなものをリストするユーザー形式についてはどうでしょう。いくつかのものは日付であり、いくつかはチェックボックスであり、いくつかはテキストです。あなたが私に尋ねるなら、それを分割します。盲目の人は、<ul>と<li>でマークアップされていて、それが単なるものの寄せ集めであるとき、「ここにリストがあります...」本当にリスト。
内部に配置するコンテンツに適切なタグを使用する必要があります。これは、ul/liがリストに適していることを意味するだけではありません。これは、リストの内容を検討し、そのリストが順序付けられていない/順序付けられたリストまたは定義リストであるかどうかを確認する必要があることも意味します。
もう1つの議論は、CSSを無効にするときです。ブラウザはデフォルトのスタイルをレンダリングするため、代替のブラウジングデバイスが使用されている場合は見やすくなります。また、アクセス可能性も向上します。
代わりにdivを使用すると、lynxはページを読みやすい形式でレンダリングできません。
私は個人的にはセマンティクスのliが好きです。ソースを表示するとき、それらがliでラップされている場合、何かのリストがあることがすぐにわかります。 divコレクションはセマンティックな意味を提供しません。通常、リストへの唯一のセマンティクスは「listItem」のようなcssクラスによって導入されます。これは明らかに、最初にliを使用すべきだったという事実を示しています。
プレゼンテーションロジックにループがある場合、divよりもliを優先します。
<li>はリスト内のアイテムを意味し、パーサー（ブラウザー、検索エンジン、スパイダー）に、アイテムをリストしていることを知らせます。 LIの代わりにDIVを使用できますが、これらのパーサーはそれらの項目がリストされていることを決して知らず、DIVはブロックであること以外は何も実際には記述しません。
プリミティブブラウザまたはモバイルデバイスで適切にレンダリングするため
プロジェクトに依存します。私は最近、リストを使用して設計されたメニューを持つプロジェクトを行いました。彼らは、スライド/フェードのようなエフェクトの束を追加することを望み、また、それを複数のレベルで折りたたみ可能にすることを望みました。
この場合、DIVの方がはるかに適していました。子divのコンテナを作成し、jQueryを適用して目的の効果を達成することができました。
プロジェクトにまだこれらの要件がなくても、将来どのように変更するかを考えるのが賢明かもしれません...
<li>（該当する場合）を使用すると、Webページで頻繁に表示される<div>タグのスープが減り、開発者の助けになります。
<div>が悪いというわけではありませんが、タグが過度に使用されると（<div>がよくあるように）、タグのセマンティックな意味が完全に役に立たなくなるまで希釈されます。最近、WebアプリのCSS/UIを支援するために雇った請負業者からこれを学びました。HTMLコードの可読性/保守性に加えた違いは、私にとって非常に顕著です。
最小限の労力で特定の方法でリストを表示することだけが必要な場合、これは簡単です。<li>は、<div>andその終了タグはHTMLではオプションです。
そして、それはセマンティクスについて他の皆が言ったことに加えてです。
ul liに関するもう1つのことは、スタイルクラスを設定するのに役立つコンテナとしてulを使用できます
<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
もちろん、それをどのように使用したいか、どのように気に入ったかによって異なります。これは私が好きな方法です
希望に感謝します
あなたの質問はすでに答えられています。ここに2セントを追加します。私は、バックエンドロジックを実行していて、デザイナーが作成したページテンプレートにデータを集約するプロジェクトに取り組んでいました。彼はulタグとliタグを使用して、ページ上のあらゆる種類のリストを表しました。その一部はウィジェットでした。データは、ユーザーがhtmlタグを介してリッチテキストを入力できるcmsからのものでした。ユーザーがコンテンツにリストを作成し始めたとき、リストは箇条書きリストのように見えなくなり、ページ全体を台無しにしました。
教訓：コンテンツにHTMLを含めることができる場合は、汎用CSSセレクターでリストタグを使用しないでください。