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,....

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ự

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>

Trong đó, kiểu danh sách có thể là:

disc (tạo ký hiệu chấm tròn đen phía trước danh sách)

circle (tạo ký hiệu chấm tròn trắng phía trước danh sách)

square (tạo ký hiệu ô vuông đen phía trước danh sách)

none (không tạo ký hiệu phía trước danh sách)

Ví dụ:

<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ự

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>

Trong đó, kiểu danh sách có thể là:

1 (Tạo số 1, 2, 3, 4,.... phía trước danh sách)

a (Tạo chữ cái a, b, c, d,.... phía trước danh sách)

A (Tạo chữ cái A, B, C, D,.... phía trước danh sách)

i (Tạo số la mã i, ii, iii, iv,.... phía trước danh sách)

I (Tạo số la mã I, II, III, IV,.... phía trước danh sách)

Ví dụ:

<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. Ví dụ:

<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,.... Ví dụ:

<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ả

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>