5

こんにちは、私は Web 開発で約 6 か月の経験があります。次の観察があります。タグをよく使用<div>します。要素を配置したり、要素をアーカイブしたりできます<div>。タグを使用して、表示プロパティを操作するだけですべてを実行できるようです。

水平メニュー ナビゲーションを除いて、<ul>または要素を組み合わせて使用​​する必要はありませんでした。要素を使用できない理由はわかりませんが、水平メニューを実現するための「規則」のようです。<li><div>

私は何か見落としてますか？<li>要素が持つ、要素よりも優れた、またはより有用なプロパティはあり<div>ますか?

この質問を水平メニュー リストだけに制限しないでください。他のものよりも a を使用するシナリオを知りたい<li>です。

4

4 に答える 4

7

はい、div タグを使用して厳密に何でも (多かれ少なかれ) 行うことができます (フォームや入力、画像などの例外を除きます)。しかし、それは重要ではありません。

まず、特定のタグにはデフォルトの CSS が適用されています。たとえば、liには弾丸があります。これらは変更できますが、多くの場合、探しているスタイルのタグを使用する方が簡単です。

しかし、最も重要な理由は、「セマンティック マークアップ」と呼ばれるものです。これは、使用する要素がセマンティックな意味に対応するという概念です。li は項目のリストであることを意味するため、CSS が適用されていなくても (スクリーン リーダーが目の不自由な人のためにページを読み上げる場合など)、それでも意味があります。

于 2012-09-25T17:57:15.123 に答える
3

あるタグを別のタグよりも使用する唯一の理由は、セマンティクスです。HTML 構文の目的は、レンダリングされるコンテンツに意味を与えることです。

<ul>要素は順序なしリストです。これは、コンテンツが順序が重要でないアイテムのコレクションであることを意味します。

<div>要素は、セマンティクスが関連付けられていない単純な構造要素です。<div>要素に通常関連付けられているスタイルを作成するために要素を使用することは確かに可能ですが<ul>、それは元の要素の固有のセマンティクスを失うことを意味します。

要素で元のセマンティクスを維持したい場合は、ロール<div>を使用できます。list

<div role="list">
    <div role="listitem">...content...</div>
    <div role="listitem">...content...</div>
    <div role="listitem">...content...</div>
</div>

ただし、WAI-ARIA ロール モデルは十分にサポートされていないため、次の基本的なマークアップを使用することをお勧めします。

<ul>
    <li>...content...</li>
    <li>...content...</li>
    <li>...content...</li>
</ul>
于 2012-09-25T17:54:58.243 に答える
1

HTML タグは、レイアウトの意図を説明するのに役立ちます。すべてに div を使用すると、内容については何も言われません。ul/li は、関連項目のリストがあることを明確にします。

これが、HTML5 に多くの新しいタグを追加する動機となりました。レイアウトにセマンティクスを追加し、コードを保守している人間やスクリーン リーダーにとって理解しやすくするためです。そうです、div だけでページを思い通りに見せることはできますが、理解するのは難しくなります。

于 2012-09-25T17:56:01.563 に答える
0

ニーズに応じて、任意のタグを使用できます。たとえば、カスタム選択を作成する場合は、ul liを使用する方が便利なため、divを使用できません。次の例を確認してください：http：//jsfiddle.net/RwtHn/1152/ ここで、さまざまなパラグラフ、写真、またはその他の静的要素を追加するセクションを決定する場合は、divを使用しても問題ありません。ul liについてはこれを確認してください：http ：//www.w3.org/TR/html401/struct/lists.html divについてはこれを確認してください：http ：//www.w3.org/wiki/HTML/Elements/div 。何をいつ使用するかはルールではありませんが、うまくコーディングしている場合はWeb開発に役立ちます。乾杯。

于 2012-09-25T18:44:10.203 に答える