HTML 중첩 목록을 만드는 올바른 방법은 무엇입니까?

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>

옵션 2가 맞습니다.

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

목록에 있는 W3C Wiki 링크(아래 주석에서 발췌):HTML 목록 Wiki.

HTML5 W3C 링크ul사양: HTML5 ul.참고:ul요소는 정확히 0 이상을 포함할 수 있습니다.li요소들.HTML5 ol에도 동일하게 적용됩니다.설명 목록(HTML5dl)은 유사하지만 두 가지 모두를 허용합니다.dt그리고.dd요소들.

추가 참고 사항:

• dl정의 목록입니다.
• ol순서대로 나열된 목록입니다.
• ul순서가 없는 목록

---

공식 W3C 링크(업데이트됨).

옵션 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>그것은 속합니다.

유효성을 검사하면 html 5에서 옵션 1이 오류로 나타납니다. 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>포함 목록 항목의.중첩 목록은 웹 사이트의 계층 구조를 정의하는 좋은 방법이기 때문에 웹 사이트 탐색 메뉴의 기본이 되는 경우가 많습니다.

이론적으로는 원하는 만큼 목록을 중첩할 수 있지만 실제로는 목록을 중첩하는 것이 너무 복잡해질 수 있습니다.매우 큰 목록의 경우, 내용을 제목이 있는 여러 목록으로 분할하거나 별도의 페이지로 분할하는 것이 좋습니다.

유효성을 검사하면 HTML 5에서 옵션 1이 오류로 나타나므로 옵션 2가 맞습니다.

목록 항목을 해당 중첩 목록의 소유자로 명확하게 표시하기 때문에 옵션 2를 선호합니다.저는 항상 의미론적으로 건전한 HTML 쪽으로 기울었습니다.

중첩 목록에 "ul" 대신 태그 "dt"를 사용하는 것에 대해 생각해 본 적이 있습니까?상속 스타일 및 구조를 사용하여 섹션당 제목을 지정할 수 있으며 내부에 있는 내용을 자동으로 표로 표시합니다.

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

대

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

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

내용/CSS를 제어하는 경우에는 문제가 되지 않지만 리치 텍스트 편집기를 만드는 경우에는 유용합니다.

예를 들어 gmail, 받은 편지함 및 Evernote에서 다음과 같은 목록을 만들 수 있습니다.

옵션 2에서는 이 작업을 수행할 수 없습니다(추가 목록 항목이 있음). 옵션 1에서는 이 작업을 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list