Cách tạo danh sách (list) trong HTML

Trong HTML có rất nhiều loại danh sách như: danh sách không có thứ tự, danh sách có thứ tự, danh sách hai cấp, danh sách ba cấp,....

Ví dụ:

Tạo danh sách không có thứ tự

Để tạo một danh sách không có thứ tự, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <ul></ul> để xác định một danh sách không có thứ tự

<ul>
</ul>

Bước 2: Xác định các phần tử trong danh sách bằng cặp thẻ <li></li>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Bước 3: Đặt thuộc tính type= "kiểu danh sách" vào trong thẻ <ul> để xác định kiểu cho danh sách.

<ul type="kiểu danh sách">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Tạo danh sách có thứ tự

Để tạo một danh sách có thứ tự, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <ol></ol> để xác định một danh sách có thứ tự

<ol>
</ol>

Bước 2: Xác định các phần tử trong danh sách bằng cặp thẻ <li></li>

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Bước 3: Đặt thuộc tính type= "kiểu danh sách" vào trong thẻ <ol> để xác định kiểu cho danh sách.

<ol type="kiểu danh sách">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Tạo danh sách hai cấp

Để tạo danh sách hai cấp, ta lồng danh sách cấp hai vào bên trong danh sách cấp một.

<ol>
    <li>Chương 1</li>
    <ul>
        <li>Bài 1.1</li>
        <li>Bài 1.2</li>
    </ul>
    <li>Chương 2</li>
    <ul>
        <li>Bài 2.1</li>
        <li>Bài 2.2</li>
    </ul>
</ol>

Ở ví dùng trên, danh sách cấp 1 tôi dùng kiểu <ol>, danh sách cấp 2 dùng kiểu <ul>. Tuy nhiên, không nhất thiết cấp 1 là phải dùng <ol> cấp 2 dùng <ul>, bạn thích dùng kiểu gì thì dùng.

Cũng với quy tắc lồng danh sách đó, chúng ta có thể tạo danh sách cấp 3, cấp 4,....

<ol>
    <li>Chương 1</li>
    <ul>
        <li>Bài 1.1</li>
        <ul>
            <li>Câu 1</li>
            <li>Câu 2</li>
        </ul>
        <li>Bài 1.2</li>
        <ul>
            <li>Câu 3</li>
            <li>Câu 4</li>
        </ul>
    </ul>
    <li>Chương 2</li>
    <ul>
        <li>Bài 2.1</li>
        <li>Bài 2.2</li>
    </ul>
</ol>

Tạo danh sách mô tả

Để tạo một danh sách mô tả, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <dl></dl> để xác định một danh sách mô tả

<dl>
</dl>

Bước 2: Xác định các ý chính của danh sách bằng cặp thẻ <dt></dt>

<dl>
    <dt>HTML/CSS</dt>
    <dt>JavaScript</dt>
    <dt>Server Side</dt>
</dl>

Bước 3: Dùng cặp thẻ <dd></dd> để xác định các miệu tả, và đặt chúng dưới các ý chính của danh sách.

<dl>
    <dt>HTML/CSS</dt>
        <dd>HTML</dd>
        <dd>CSS</dd>
    <dt>JavaScript</dt>
        <dd>JavaScript</dd>
        <dd>jQuery</dd>
    <dt>Server Side</dt>
        <dd>PHP</dd>
        <dd>MySQL</dd>
</dl>