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>

옵션 2 가 맞습니다.

중첩 된 목록은 중첩 된 목록 의 <li>요소 안에 있어야합니다 .

W3C Wiki on Lists 링크 (아래 주석에서 가져옴) : HTML Lists Wiki .

HTML5 W3C ul사양에 링크하십시오 : HTML5ul . • 그래도 참고 ul요소가 정확히 0 개 이상 포함 할 수 있습니다 li요소. HTML5ol 에도 동일하게 적용됩니다 . 설명 목록 ( HTML5dl )은 비슷하지만 요소 dt와 dd요소를 모두 허용합니다 .

더 많은 메모 :

• dl = 정의 목록.
• ol = 주문 목록 (숫자).
• ul = 순서가없는 목록 (글 머리 기호).

옵션 2

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

중첩 목록-UL

옵션 2는 정확합니다. 중첩 <ul>은 <li>속한 하위입니다 .

유효성 을 검사 하면 옵션 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. 섹션 1
   2. 섹션 2
   3. 섹션 3
2. 제 2 장
3. 제 3 장

중첩 목록의 핵심은 중첩 목록이 하나의 특정 목록 항목과 관련되어야한다는 것을 기억하는 것입니다. 이를 코드에 반영하기 위해 중첩 목록은 해당 목록 항목 안에 포함됩니다. 위 목록의 코드는 다음과 같습니다.

<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>포함 목록 항목 앞에옵니다 . 중첩 목록은 웹 사이트의 계층 구조를 정의하는 좋은 방법이기 때문에 종종 웹 사이트 탐색 메뉴의 기초를 형성합니다.

이론적으로는 목록을 원하는만큼 중첩 할 수 있지만 실제로는 목록을 너무 깊게 중첩하는 것이 혼동 될 수 있습니다. 매우 큰 목록의 경우 콘텐츠를 제목이있는 여러 목록으로 나누거나 별도의 페이지로 나누는 것이 좋습니다.

의 유효성을 검사하면 옵션 1이 HTML 5에서 오류로 표시되므로 옵션 2가 올바른 것입니다.

옵션 2는 목록 항목을 해당 중첩 목록의 소유자로 명확하게 표시하기 때문에 옵션 2를 선호합니다. 나는 의미 적으로 건전한 HTML에 항상 의지 할 것이다.

중첩 목록에 "ul"대신 "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>

여기서 언급하지 않은 것은 옵션 1을 사용하면 임의로 목록을 깊게 중첩 할 수 있다는 것입니다.

content / css를 제어하는 ​​경우에는 중요하지 않지만 서식있는 텍스트 편집기를 만드는 경우 편리합니다.

예를 들어 gmail, inbox 및 evernote는 모두 다음과 같은 목록을 만들 수 있습니다.

옵션 2를 사용하면 옵션 1을 사용하여 추가 목록 항목을 확보 할 수 없습니다.