HTML 중첩 <ul>을 만드는 적절한 방법?

질문 : 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 가 맞습니다.

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

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

HTML5 W3C ul 사양 링크 : HTML5 ul . ul 요소는 정확히 0 개 이상의 li 요소를 포함 할 수 있습니다. HTML5 ol 에도 동일하게 적용됩니다. 설명 목록 ( HTML5 dl )은 비슷하지만 dt 및 dd 요소를 모두 허용합니다.

더 많은 메모 :

• dl = 정의 목록.
• ol = 정렬 된 목록 (숫자).
• ul = 정렬되지 않은 목록 (글 머리 기호).

출처 : https://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list