575

W3 ドキュメントには、ネストされたリストの例の前DEPRECATED EXAMPLE:に がありますが、廃止されていない例で修正したり、例の何が問題なのかを正確に説明したりしませんでした。

では、HTML リストを記述する正しい方法は次のうちどれですか?

オプション 1 : ネストされた<ul>ものは親の子です<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

オプション 2 : ネストされたものは、それが属する<ul>の子です<li>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>
4

7 に答える 7

573

選択肢 2は正しいです。

ネストされたリストは、ネストされているリストの要素内にある<li>必要があります。

リストに関する W3C Wiki へのリンク (以下のコメントから取得): HTML Lists Wiki。

HTML5 W3Cul仕様へのリンク: HTML5 ul。ul要素には、正確に 0 個以上の要素が含まれる場合があることに注意してくださいli。同じことがHTML5 olにも当てはまります。説明リスト ( HTML5 dl ) は似ていますが、要素dtとdd要素の両方を使用できます。

その他の注意事項:

  • dl= 定義リスト。
  • ol= 順序付きリスト (数字)。
  • ul= 順不同リスト (箇条書き)。

公式の W3C リンク(更新)。

于 2011-05-05T14:28:46.587 に答える
70

オプション 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

ネスティング リスト - UL

于 2011-05-05T14:30:38.490 に答える
42

オプション 2 は正しいです。ネストされたは、それが属する<ul>の子です。<li>

検証すると、オプション 1 が html 5 のエラーとして表示されます -- クレジット: user3272456

正:<ul>の子として<li>

HTML のネストされたリストを作成する適切な方法は、ネストされたをそれが属する<ul>の子として使用することです。ネストされたリストは、ネストされているリストの要素の<li>内側にある必要があります。<li>

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

リストの入れ子に関する W3C 標準

リスト アイテムには、別の完全なリストを含めることができます。これは、リストの「ネスト」と呼ばれます。この記事の冒頭にあるような、目次などに役立ちます。

  1. 第一章
    1. セクション 1
    2. セクション 2
    3. セクション 3
  2. 第二章
  3. 第三章

リストをネストするための鍵は、ネストされたリストが 1 つの特定のリスト項目に関連付けられる必要があることを覚えておくことです。これをコードに反映するために、ネストされたリストがそのリスト項目内に含まれています。上記のリストのコードは次のようになります。

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

ネストされたリストが<li>、含まれるリスト項目 (「第 1 章」) のテキストの後にどのように始まるかに注意してください。</li>その後、それを含むリスト項目の の前で終了します。ネストされたリストは、Web サイトの階層構造を定義するのに適した方法であるため、Web サイトのナビゲーション メニューの基礎となることがよくあります。

理論的には、好きなだけリストをネストできますが、実際には、リストを深くネストしすぎると混乱する可能性があります。リストが非常に大きい場合は、コンテンツを見出し付きのいくつかのリストに分割するか、別のページに分割することをお勧めします。

于 2015-05-05T22:52:51.453 に答える
8

を検証するとhtml5では選択肢1がエラーになるので選択肢2が正解です。

于 2014-02-04T19:52:51.637 に答える
7

入れ子になったリストの所有者としてリスト項目が明確に示されるので、私はオプション 2 を好みます。私は常に意味論的に健全な HTML に傾倒していました。

于 2011-05-05T14:30:52.723 に答える
-5

ここで言及されていないのは、オプション 1 を使用すると、リストを任意に深くネストできることです。

content/css を制御する場合は問題になりませんが、リッチ テキスト エディターを作成する場合は便利です。

たとえば、gmail、inbox、evernote ではすべて、次のようなリストを作成できます。

任意にネストされたリスト

オプション 2 ではそれができません (余分なリスト アイテムがあります)、オプション 1 ではできます。

于 2016-06-30T02:05:40.143 に答える