Danh sách trong HTML5

Trong hướng dẫn này, bạn sẽ học cách tạo các loại danh sách khác nhau trong HTML5.

Làm việc với danh sách trong HTML

Danh sách trong HTML được sử dụng để trình bày danh sách thông tin theo cách có ngữ nghĩa. Có ba loại danh sách khác nhau trong HTML và mỗi loại có một mục đích và ý nghĩa cụ thể.

• Danh sách không có thứ tự – Được sử dụng để tạo danh sách các mục có liên quan, không theo thứ tự cụ thể.
• Danh sách có thứ tự – Được sử dụng để tạo danh sách các mục liên quan, theo một thứ tự cụ thể.
• Danh sách mô tả – Được sử dụng để tạo danh sách các thuật ngữ và mô tả của chúng.

Lưu ý: Bên trong phần tử danh sách, bạn có thể đặt văn bản, hình ảnh, liên kết, ngắt dòng, v.v. Bạn cũng có thể đặt toàn bộ danh sách bên trong một phần tử danh sách khác để tạo danh sách lồng nhau.

Trong các phần tiếp theo, chúng tôi sẽ lần lượt trình bày ba loại danh sách.

Danh sách không có thứ tự trong HTML

Một danh sách không có thứ tự được tạo bằng cách sử dụng thẻ <ul> và mỗi phần tử trong danh sách bắt đầu bằng thẻ <li>.

Các phần tử trong danh sách không có thứ tự được đánh dấu bằng dấu đầu dòng. Đây là một ví dụ:

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

Kết quả của ví dụ trên sẽ giống như sau:

Bạn cũng có thể thay đổi loại dấu đầu dòng trong danh sách không có thứ tự của mình bằng cách sử dụng thuộc tính list-style-type trong CSS. Style CSS sau thay đổi loại dấu đầu dòng từ hình tròn mặc định thành hình vuông:

ul {
    list-style-type: square;
}

Danh sách có thứ tự trong HTML

Một danh sách có thứ tự được tạo bằng cách sử dụng thẻ <ol> và mỗi phần tử trong danh sách bắt đầu bằng thẻ <li>. Danh sách có thứ tự được sử dụng khi thứ tự của các phần tử trong danh sách là quan trọng.

Các phần tử trong danh sách có thứ tự được đánh dấu bằng số. Đây là một ví dụ:

<ol>
    <li>Fasten your seatbelt</li>
    <li>Starts the car's engine</li>
    <li>Look around and go</li>
</ol>

Kết quả của ví dụ trên sẽ giống như sau:

Việc đánh số các phần tử trong danh sách có thứ tự thường bắt đầu bằng 1. Tuy nhiên, nếu bạn muốn thay đổi, bạn có thể sử dụng thuộc tính start, như thể hiện trong ví dụ sau:

<ol start="10">
    <li>Mix ingredients</li>
    <li>Bake in oven for an hour</li>
    <li>Allow to stand for ten minutes</li>
</ol>

Kết quả của ví dụ trên sẽ giống như sau:

Giống như danh sách không có thứ tự, bạn cũng có thể sử dụng thuộc tính list-style-type trong CSS để thay đổi kiểu đánh số trong danh sách có thứ tự. Style CSS sau thay đổi loại dấu đầu dòng từ số thập phân thành số la mã.

ol {
    list-style-type: upper-roman;
}

Mẹo: Bạn cũng có thể sử dụng thuộc tính type để thay đổi kiểu đánh số, ví dụ type="I". Tuy nhiên, bạn nên tránh sử dụng thuộc tính này, thay vào đó hãy sử dụng thuộc tính list-style-type trong CSS.

Danh sách mô tả trong HTML

Danh sách mô tả là danh sách các phần tử kèm theo mô tả hoặc định nghĩa của từng phần tử.

Danh sách mô tả được tạo bằng cách sử dụng thẻ <dl>. Thẻ <dl> được sử dụng cùng với thẻ <dt> định nghĩa một thuật ngữ và thẻ <dd> định nghĩa mô tả của thuật ngữ.

Các trình duyệt thường hiển thị danh sách mô tả bằng cách đặt các thuật ngữ và mô tả trong các dòng riêng biệt, trong đó các mô tả của thuật ngữ được thụt vào một chút. Đây là một ví dụ:

<dl>
    <dt>Bread</dt>
    <dd>A baked food made of flour.</dd>
    <dt>Coffee</dt>
    <dd>A drink made from roasted coffee beans.</dd>
</dl>

Kết quả của ví dụ trên sẽ giống như sau: