アイテムをリストするときに ul-li を使用する必要があるのに対し、単に div を使用する必要がある理由がわかりません。両方をまったく同じに見せることができるので、順序付けられていないリストを作成することと、divを並べることの機能上の利点はどこにありますか?
49525 次
15 に答える
152
意味の正しさのために。HTML には物事のリストを表現する機能があり、Google ロボット、スクリーン リーダー、およびサイトの表示だけを気にしないあらゆる種類のユーザーがコンテンツをよりよく理解するのに役立ちます。
于 2009-02-14T19:55:34.843 に答える
134
アイテムをリストするときに、単に div を使用するのではなく、ul-li を使用する必要がある理由がわかりません。両方をまったく同じに見せることができます
あなたの質問には「見る」というキーワードがあります。点字リーダーを使って、目の不自由な人にも同じようにタイプさせることはできますか? テキスト読み上げシンセサイザーを使用して、目の不自由な人に同じように聞こえるようにすることはできますか? カスタムのクライアント側 CSS ユーザー スタイルシートを使用して、視覚障害者に同じように見えるようにすることはできますか?
「見る」という言葉は非常に危険な言葉です。HTML に関連して使用すると、頭の中ですべてのアラームが鳴るはずです。HTML は、ハイパーメディア ドキュメントのセマンティック構造を記述するための言語です。セマンティック構造には「外観」がなく、抽象的な概念です。
このセマンティックなごまかしや目の不自由な人を気にしないとしても、次のことを考慮してください。Google、Yahoo、MSN、および Co. には目がなく、レンダリングされた CSS を「見て」いません。 .
于 2009-02-14T20:41:23.080 に答える
17
あなたの質問への直接的な答え: 機能上の利点は、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/Crtl+S)、divは消えて自然にスタックします。ネイキッド HTML は、上から下へ、最も重要なコンテンツが最初に、リスト項目の箇条書きと番号を含むリストという、明確な階層を備えた適切なページをレンダリングする必要があります。また、メイン コンテンツ、重要なフォーム、またはメインの見出し (目次など) にスキップできるリンクを上部近くに追加することをお勧めします (視覚的でないユーザー向け)。
最後に、文書を作成していることに注意してください。すべての視覚効果がなくても、説得力のあるドキュメントである必要があります。
于 2010-06-10T15:12:38.037 に答える
17
意味的に正しいマークアップを使用することで、テキストに余分な情報を埋め込むことができます。ul/li を使用することで、情報がリストであり、任意の要素内のテキストである「何か」(誰が何を知っているか) だけではないことを消費アプリケーションに伝えます。
于 2009-02-14T19:55:14.440 に答える
7
<li>使用または使用については多くの議論がありますが<div>、これらのタグ内に入るコンテンツの具体的な例を示したコメントは1つもありません. 私が実際にウェブサイト、新聞、雑誌、オンラインまたは印刷物で物事の「リスト」を実際に読んだことを最後に伝えることができないので、それはそれほど重要ではない<ul>と感じています.<li>
<div>はるかに用途が広いです。ケーキの材料をリストしている場合、それはリストです. ハイキング旅行のために持ち物をリストしている場合、それはリストです.
しかし、たとえば、実際にはリストでも、一連の段落でも、すべての「ヘッダー」でもないランダムなものをリストする のユーザー フォームはどうでしょうか。日付、チェックボックス、テキストなどがあります。あなたが私に尋ねるなら、それを分けてください。<ul>目の不自由な人は、andでマークアップされていて<li>、実際にはリストではなく寄せ集めの寄せ集めであるときに「Here is a list of ...」と聞こえると、誤った情報を受け取ることになります。
于 2011-03-04T22:38:54.593 に答える
4
代わりに div を使用すると、lynx はページを読みやすい形式でレンダリングできなくなります。
于 2009-02-14T20:06:00.763 に答える
4
入れたいコンテンツに適切なタグを使用する必要があります。これは、リストには ul/li の方が適しているということだけではありません。これはまた、リストの内容を考慮し、それが順序付けられていない/順序付けられたリストか定義リストかを確認する必要があることを意味します。
別の引数は、css を無効にした場合です。ブラウザはデフォルトのスタイルをレンダリングするため、別のブラウジング デバイスを使用した場合に見やすくなります。アクセシビリティも高めます。
于 2009-02-14T19:58:43.650 に答える
3
プロジェクトによって異なります。私は最近、リストを使用して設計されたメニューを持つプロジェクトを行いました。彼らは、スライド/フェードなどのエフェクトをたくさん追加したいと考えていました。また、複数のレベルで折りたためるようにしたいと考えていました。
この場合、DIV の方がはるかに適していました。子 div のコンテナーを作成し、jQuery を適用して目的の効果を実現することができました。
プロジェクトにこれらの要件がまだない場合でも、将来どのように変更するかを考えるのが賢明かもしれません...
于 2011-04-09T17:02:38.830 に答える
3
私は個人的に意味論のためにliのが好きです。ソースを表示すると、li でラップされている場合、何かのリストがあることがすぐにわかります。div コレクションはセマンティックな意味を提供しません。通常、リストへの唯一のセマンティクスは、「listItem」などの css クラスによって導入されます。これは明らかに、そもそも李が使われるべきだったという事実を示しています。
プレゼンテーション ロジックにループがある場合、私は常に div よりも li を優先します。
于 2009-02-14T20:08:39.633 に答える
3
<li> はリスト内のアイテムを意味し、パーサー (ブラウザー、検索エンジン、スパイダー) にアイテムをリストしていることを知らせます。LI の代わりに DIV を使用できますが、それらのパーサーはそれらのアイテムがリストされていることを決して認識せず、DIV はそれがブロックであることを除いて実際には何も記述しません。
于 2009-02-14T20:38:38.610 に答える
2
基本的なブラウザまたはモバイル デバイスで適切にレンダリングするため
于 2009-02-14T22:43:01.480 に答える
2
あなたの質問は、私がここに私の 2 セントを追加したいということで既に回答されています。私はバックエンド ロジックを実行しているプロジェクトに取り組んでおり、データはデザイナーが作成したページ テンプレートに集約されていました。彼は ul タグと li タグを使用して、ページ上のあらゆる種類のリストを表し、その一部はウィジェットでした。データは、ユーザーが html タグを介してリッチ テキストを入力できる cms からのものでした。ユーザーがコンテンツにリストを作成し始めたとき、リストは箇条書きリストのように見えなくなり、ページ全体が台無しになりました。
教訓: コンテンツ自体に html を含めることができる場合は、一般的な css セレクターでリスト タグを使用しないでください。
于 2013-02-01T17:45:25.563 に答える