Hướng dẫn sử dụng HTML Lists
Xem thêm các chuyên mục:
Trong HTML để tạo ra một danh sách (List) bạn có thể sử dụng cặp thẻ <ul>, <li> hoặc cặp thẻ <ol>, <li>:

<h3>Unordered List (UL + LI)</h3> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> <h3>Ordered List (OL + LI)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
- <UL> là từ viết tắt của Unordered List, giúp bạn tạo ra một danh sách không có thứ tự.
- <OL> là từ viết tắt của Ordered List, giúp bạn tạo ra một danh sách có thứ tự.
- <LI> là từ viết tắt của List Item. Một mục (item) của danh sách.
Các danh sách có thể lồng vào với nhau:
nested-example.html
<h3>Nested Unordered List</h3> <ul> <li>HTML</li> <li>CSS <ul> <li>Basic CSS</li> <li>Advanced CSS</li> </ul> </li> <li>Javascript</li> </ul> <h3>Nested Ordered List</h3> <ol> <li>HTML</li> <li>CSS <ol> <li>Basic CSS</li> <li>Advanced CSS</li> </ol> </li> <li>Javascript</li> </ol> <h3>Nested List (3)</h3> <ol> <li>HTML</li> <li>CSS <ul> <li>Basic CSS</li> <li>Advanced CSS</li> </ul> </li> <li>Javascript</li> </ol> <h3>Nested List (4)</h3> <ul> <li>HTML</li> <li>CSS <ol> <li>Basic CSS</li> <li>Advanced CSS</li> </ol> </li> <li>Javascript</li> </ul>
Khác với thẻ <UL>, thẻ <OL> có một vài thuộc tính (attribute) quan trọng, chúng bao gồm:
- type
- start
- reversed
type
Thuộc tính type chỉ định kiểu đánh số (numbering type), nó có thể nhận một trong các giá trị sau:
Type | Mô tả |
"1" | Sử dụng các con số (1,2,..) để đánh số cho danh sách. (Mặc định) |
"a" | Sử dụng các ký tự viết thường (lowercase) để đánh số cho danh sách. |
"A" | Sử dụng các ký tự viết hoa (uppercase) để đánh số cho danh sách. |
"i" | Sử dụng các số La mã (Roman numerals) viết thường (lowercase) để đánh số cho danh sách. |
"I" | Sử dụng các số La mã (Roman numerals) viết hoa (uppercase) để đánh số cho danh sách. |
<h3>OL type="1" (Default)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="i"</h3> <ol type="i"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="I"</h3> <ol type="I"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="a"</h3> <ol type="a"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL type="A"</h3> <ol type="A"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
reversed
Thuộc tính reversed có giá trị true/false, Nếu giá trị là true, danh sách sẽ được đánh số theo thứ tự đảo ngược.
ol-reversed-example.html
<h3>OL reversed = "false" (Default)</h3> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL reversed = "true"</h3> <ol reversed="true"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>
start
Thuộc tính start chỉ định giá trị bắt đầu để đánh số cho danh sách.
ol-start-example.html
<h3>OL start ="3" type="1"</h3> <ol start="3"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL start ="3" type="i"</h3> <ol start="3" type="i"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol> <h3>OL start ="3" type="a"</h3> <ol start="3" type="a"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ol>