• Trang chủ
• Hướng dẫn HTML
• Danh sách trong HTML

Danh sách trong HTML

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

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

Danh sách HTML được sử dụng để trình bày danh sách thông tin theo cách tốt và 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.

Trong các phần sau, chúng tôi sẽ lần lượt trình bày tất cả 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 phần tử <ul> và mỗi mục danh sách bắt đầu bằng phần tử <li>.

Các mục danh sách 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:

• Chocolate Cake
• Black Forest Cake
• Pineapple Cake

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 CSS list-style-type. Quy tắc kiểu sau thay đổi loại dấu đầu dòng từ đĩa tròn mặc định thành hình vuông :

ul {
    list-style-type: square;
}

Vui lòng xem hướng dẫn về danh sách CSS để tìm hiểu chi tiết về cách tạo kiểu danh sách HTML. Xem thêm Các kiểu làm đẹp List bằng CSS

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 phần tử <ol> và mỗi mục danh sách bắt đầu bằng phần tử <li>. Danh sách có thứ tự được sử dụng khi thứ tự của các mục trong danh sách là quan trọng.

Các mục danh sách trong một 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 mục 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 CSS list-style-type để thay đổi kiểu đánh số trong danh sách có thứ tự. Quy tắc kiểu sau thay đổi loại điểm đánh dấu thành số la mã.

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

Danh sách mô tả HTML

Danh sách mô tả là danh sách các mục với mô tả hoặc định nghĩa của từng mục.

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

Các trình duyệt thường hiển thị danh sách định nghĩa bằng cách đặt các thuật ngữ và định nghĩa trong các dòng riêng biệt, trong đó các định nghĩa 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: