HTML/CSS | Thẻ danh sách lồng nhau

Học HTML, CSS từ Zero Tới Hero

Danh sách lồng nhau

Đây là một tình huống thường xuyên bắt gặp trong thực tế, nhất là khi chúng ta làm:

• Menu đa cấp
• Dàn ý, mục lục

Ví dụ:

<ol>
    <li>Giới thiệu khóa học</li>
    <li>
        Nội dung chính
        <ol>
            <li>Làm quen HTML CSS</li>
            <li>Học cách dàn trang</li>
            <li>Thực hành làm dự án</li>
        </ol>
    </li>
    <li>Hoàn thành khóa học</li>
</ol>

Các danh sách có thể lồng nhau kết hợp nhiều cấp. Tuy nhiên, để đảm bảo mặt thẩm mỹ và giúp nội dung dễ đọc bạn chỉ nên dùng từ 1 - 3 cấp.

Các loại danh sách có thể kết hợp với nhau theo nhiều cách như: ul với ul, ul với ol, v.v. Để quyết định dùng loại danh sách nào chúng ta sẽ dựa vào ý nghĩa nội dung mà chúng thể hiện.

Khi sử dụng danh sách lồng nhau cần đảm bảo danh sách con luôn nằm trong một thẻ <li>.

Ví dụ sử dụng sai cách:

<ol>
    <li>Giới thiệu khóa học</li>
    <li>Nội dung chính</li>
    <ol>
        <li>Làm quen HTML CSS</li>
        <li>Học cách dàn trang</li>
        <li>Thực hành làm dự án</li>
    </ol>
    <li>Hoàn thành khóa học</li>
</ol>

Tóm tắt

• Những tình huống sử dụng danh sách lồng nhau thường gặp: menu đa cấp, dàn ý, mục lục, v.v.
• Các danh sách có thể lồng nhau kết hợp nhiều cấp. Tuy nhiên, để đảm bảo mặt thẩm mỹ và giúp nội dung dễ đọc bạn chỉ nên dùng từ 1 - 3 cấp.
• Các loại danh sách có thể kết hợp với nhau theo nhiều cách như: ul với ul, ul với ol, v.v. Để quyết định dùng loại danh sách nào chúng ta sẽ dựa vào ý nghĩa nội dung mà chúng thể hiện.
• Khi sử dụng danh sách lồng nhau cần đảm bảo danh sách con luôn nằm trong một thẻ <li>.