web-dev-qa-db-ja.com

HTMLの入れ子になったリストを作るための適切な方法は？

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>
htmlhtml-listsnested-lists
460
Ricket

オプション2は正しいです。

ネストしたリストは、ネストしたリストの<li>要素内である必要があります。

リスト上のW3C Wikiへのリンク（下記のコメントから引用）： HTML Lists Wiki 。

HTML5 W3C ul仕様へのリンク： HTML5 ul 。 ul要素には、ゼロ個以上のli要素を含めることができます。同じことが HTML5 ol にも当てはまります。記述リスト（ HTML5 dl ）は似ていますが、dtとddの両方の要素を使用できます。

その他のメモ：

  • dl =定義リスト.
  • ol =番号付きリスト（数字）。
  • ul =番号なしリスト（箇条書き）.
464
DwB

オプション2

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

ネストリスト - UL

55
csi

オプション2が正しい：入れ子になった<ul>は、それが属する<li>の子です。

validate の場合、オプション1がHTML 5のエラーとして表示されます。 - credit： 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. 第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>とそれを含んでいるリスト項目のテキストの後にネストされたリストがどのように始まるかに注意してください（“ Chapter One”）。その後、包含リスト項目の</li>の前で終了します。入れ子になったリストは、Webサイトの階層構造を定義するのに適した方法であるため、Webサイトのナビゲーションメニューの基礎となることがよくあります。

理論的には、好きなだけリストを入れ子にすることができますが、実際にはリストを深く入れ子にすると混乱することがあります。非常に大きなリストの場合は、コンテンツを見出し付きの複数のリストに分割したり、個別のページに分割したりすることをお勧めします。

28
Geoffrey Hale

検証した場合、オプション1はhtml 5のエラーとして表示されるので、オプション2は正しいです。

7
user3272456

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

6
Ken Gregory

ネスティングリストに "ul"の代わりにTAG "dt"を使用することを考えましたか？それはスタイルと構造を継承しているので、セクションごとにタイトルを付けることができ、自動的に中に入るコンテンツを表にします。

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

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