Thẻ danh sách

Trong HTML, danh sách (list) là một cách trực quan để trình bày thông tin dạng các mục liên quan với nhau. Nhờ danh sách, nội dung trở nên dễ đọc, dễ sắp xếp và rõ ràng về mặt cấu trúc.

Thẻ ul và ol

• Thẻ ul (unordered list, danh sách không có thứ tự)
  Dùng để hiển thị danh sách mà thứ tự không quan trọng, thường dùng cho menu, danh sách tính năng, danh sách gạch đầu dòng.
• Thẻ ol (ordered list, danh sách có thứ tự)
  Dùng để hiển thị danh sách có thứ tự quan trọng, ví dụ: các bước thực hiện, thứ hạng, danh sách ưu tiên.
• Thẻ li (list item)
  Là thẻ con bắt buộc nằm bên trong <ul> hoặc <ol> để định nghĩa từng mục trong danh sách.

CSS có thể thay đổi kiểu hiển thị marker (bullet, số, chữ cái...) nhưng bạn vẫn nên chọn thẻ ul hay ol dựa trên ngữ nghĩa nội dung.

Ví dụ:

<!-- Danh sách không thứ tự -->
<ul>
  <li>Cà phê</li>
  <li>Trà</li>
  <li>Sinh tố</li>
</ul>

<!-- Danh sách có thứ tự -->
<ol>
  <li>Bước 1: Chuẩn bị nguyên liệu</li>
  <li>Bước 2: Đun sôi nước</li>
  <li>Bước 3: Pha trà</li>
</ol>

Danh sách lồng nhau

Khi có nhiều cấp nội dung, bạn có thể lồng danh sách này vào danh sách kia. Ví dụ thường gặp:

• Menu đa cấp
• Mục lục bài viết
• Dàn ý bài học

Nguyên tắc quan trọng:

• Danh sách con phải nằm trong một thẻ <li> của danh sách cha.
• Nên giới hạn 1–3 cấp để nội dung dễ đọc.

Ví dụ chuẩn:

<ol>
  <li>Giới thiệu khóa học</li>
  <li>
    Nội dung chính
    <ol>
      <li>Làm quen HTML CSS</li>
      <li>Học cách dàn trang</li>
      <li>Thực hành làm dự án</li>
    </ol>
  </li>
  <li>Hoàn thành khóa học</li>
</ol>

Ví dụ sai cách (danh sách con không nằm trong <li>):

<ol>
  <li>Giới thiệu khóa học</li>
  <li>Nội dung chính</li>
  <ol>
    <li>Làm quen HTML CSS</li>
    <li>Học cách dàn trang</li>
    <li>Thực hành làm dự án</li>
  </ol>
  <li>Hoàn thành khóa học</li>
</ol>

Tính chất mặc định của ul và ol

• Khoảng đệm bên trái (padding-left) Trình duyệt mặc định thụt lề danh sách so với đoạn văn để dễ nhìn. Danh sách lồng nhau sẽ thụt vào thêm.
• Khoảng cách trên/dưới (margin-top & margin-bottom) Giống như thẻ
  , danh sách có khoảng trống mặc định phía trên và dưới.
• Marker (bullet/number) Mỗi mục danh sách có ký hiệu đánh dấu. Với CSS, bạn có thể tùy chỉnh kiểu marker:

ul {
  list-style-type: square; /* Kiểu bullet: hình vuông */
}

ol {
  list-style-type: upper-roman; /* Kiểu số: chữ số La Mã */
}

Một số giá trị phổ biến cho list-style-type:

• disc (mặc định, dấu chấm tròn)
• circle (hình tròn rỗng)
• square (hình vuông)
• decimal (số thập phân 1, 2, 3)
• upper-roman (I, II, III)
• lower-alpha (a, b, c)

Một số mẹo hay khi sử dụng danh sách

• Giữ đúng ngữ nghĩa HTML: Nếu không cần số thứ tự thì dùng ul, nếu có số thứ tự thì dùng ol.
• Sử dụng CSS để thay đổi giao diện thay vì đổi thẻ: Đừng dùng <ol> chỉ để có bullet khác - hãy đổi bằng list-style-type.
• Danh sách có thể chứa bất cứ phần tử HTML nào: Ví dụ <p>, <div>, <span>, thậm chí cả hình ảnh.

Kết luận