Thẻ List trong HTML: Hướng Dẫn Toàn Diện về UL, OL & DL

Bạn có bao giờ thắc mắc làm thế nào để trình bày thông tin trên web một cách gọn gàng và dễ đọc không? Câu trả lời nằm ở các thẻ list trong HTML. Đây là công cụ không thể thiếu để tạo ra mọi thứ, từ menu điều hướng cho đến các bước hướng dẫn chi tiết. Trong bài viết này, WiWeb sẽ cùng bạn đi từ A-Z, khám phá toàn bộ thế giới của thẻ list trong HTML một cách đơn giản và trực quan nhất. Hãy cùng bắt đầu nhé!

Các loại thẻ list trong HTML

Trước khi đi sâu vào code, chúng ta hãy cùng tìm hiểu tại sao thẻ list lại quan trọng đến vậy. Trong thế giới web, cấu trúc là vua. Một nội dung được sắp xếp mạch lạc không chỉ giúp người đọc dễ dàng nắm bắt thông tin mà còn giúp các công cụ tìm kiếm như Google hiểu rõ hơn về trang của bạn.

Tại sao thẻ list lại quan trọng

Thẻ List giúp chúng ta chia nhỏ các khối thông tin phức tạp thành những mục riêng lẻ, dễ tiêu hóa. Thay vì một đoạn văn dài, bạn có thể trình bày các ý chính một cách rõ ràng. Điều này đặc biệt hữu ích cho việc tạo menu, liệt kê tính năng sản phẩm, hay viết một bài hướng dẫn từng bước. Sử dụng đúng các thẻ tạo thẻ list HTML là một bước cơ bản nhưng cực kỳ hiệu quả để cải thiện trải nghiệm người dùng.

Giới thiệu 3 loại thẻ list chính

HTML cung cấp cho chúng ta ba loại thẻ list chính, mỗi loại phục vụ một mục đích riêng biệt. Việc lựa chọn đúng loại thẻ list sẽ giúp nội dung của bạn trở nên ngữ nghĩa và logic hơn.

• Thẻ list không có thứ tự (<ul>): Dùng khi thứ tự của các mục không quan trọng. Ví dụ: danh sách các nguyên liệu làm bánh, danh sách các tính năng của một phần mềm.
• Thẻ list có thứ tự (<ol>): Dùng khi thứ tự của các mục là yếu tố bắt buộc. Ví dụ: các bước trong một công thức nấu ăn, bảng xếp hạng, quy trình làm việc.
• Thẻ list mô tả/định nghĩa (<dl>): Dùng để liệt kê các cặp thuật ngữ và định nghĩa của chúng. Ví dụ: một bảng chú giải thuật ngữ, danh sách các câu hỏi thường gặp (FAQ).

Thẻ list không có thứ tự

Đây là loại thẻ list phổ biến nhất mà bạn sẽ gặp. Đúng như tên gọi thẻ list không có thứ tự, nó dùng để liệt kê các mục mà không cần quan tâm đến vị trí của chúng. Hãy tưởng tượng bạn đang ghi ra những món đồ cần mua ở siêu thị, bạn không cần phải mua cà chua trước khi mua trứng đúng không nào?

Thẻ ul

Thẻ <ul> (viết tắt của Unordered List) đóng vai trò là một thẻ chứa, bao bọc toàn bộ danh sách của bạn. Nó báo cho trình duyệt biết rằng, “Này, mọi thứ bên trong tôi là một danh sách không theo thứ tự nhé!”. Mọi danh sách <ul> đều phải bắt đầu bằng thẻ mở <ul> và kết thúc bằng thẻ đóng </ul>.

Thẻ li

Vậy làm thế nào để thêm các mục vào danh sách? Đó là lúc thẻ <li> (viết tắt của List Item) phát huy tác dụng. Mỗi một <li> đại diện cho một mục trong danh sách của bạn. Tất cả các thẻ <li> phải được đặt bên trong cặp thẻ <ul> hoặc <ol>.

Đây là bộ đôi không thể tách rời: <ul> là cái giỏ, và <li> là những món đồ bên trong. Cách tạo list trong HTML với <ul> và <li> cực kỳ đơn giản.

Ví dụ code

Dưới đây là một ví dụ về danh sách các loại trái cây yêu thích:

<h2>Trái cây yêu thích</h2>
<ul>
  <li>Táo</li>
  <li>Xoài</li>
  <li>Dâu tây</li>
  <li>Cam</li>
</ul>

Khi hiển thị trên trình duyệt, mỗi mục sẽ có một dấu đầu dòng (bullet point) ở trước, thường là một chấm tròn đen đặc.

Thẻ list có thứ tự

Trái ngược với <ul>, thẻ list có thứ tự được sử dụng khi trình tự của các mục là cực kỳ quan trọng. Hãy nghĩ đến các bước để pha một tách cà phê, bạn không thể cho nước sôi vào trước khi có cà phê và phin được, phải không?

Thẻ ol

Câu trả lời chính là thẻ <ol> (viết tắt của Ordered List). Tương tự như <ul>, thẻ <ol> cũng là thẻ bao bọc toàn bộ danh sách. Các mục bên trong nó vẫn được định nghĩa bằng thẻ <li>. Sự khác biệt lớn nhất là trình duyệt sẽ tự động đánh số thứ tự cho các mục <li> này.

Các thuộc tính hữu ích của thẻ ol

Thẻ <ol> còn đi kèm một vài thuộc tính của thẻ ol rất thú vị để bạn tùy chỉnh cách đánh số. Bạn có thấy phần này hữu ích không?

• type: Cho phép bạn thay đổi kiểu đánh dấu. Các giá trị phổ biến bao gồm:
  • "1": Số thập phân (mặc định).
  • "A": Chữ hoa (A, B, C).
  • "a": Chữ thường (a, b, c).
  • "I": Số La Mã viết hoa (I, II, III).
  • "i": Số La Mã viết thường (i, ii, iii).
• start: Xác định giá trị bắt đầu của danh sách. Ví dụ, start="3" sẽ bắt đầu đếm từ số 3.
• reversed: Một thuộc tính boolean. Nếu có thuộc tính này, danh sách sẽ được đếm ngược.

Ví dụ code

Hãy xem một ví dụ về các bước để xuất bản bài viết blog, bắt đầu từ bước 3 và sử dụng chữ cái viết hoa.

<h2>Quy trình xuất bản bài viết</h2>
<ol type="A" start="3">
  <li>Viết bản nháp</li>
  <li>Thiết kế hình ảnh</li>
  <li>Tối ưu SEO</li>
  <li>Xuất bản bài viết</li>
</ol>

Thẻ list mô tả/định nghĩa

Đây là loại thẻ list ít được biết đến hơn nhưng lại cực kỳ mạnh mẽ trong những trường hợp cụ thể. thẻ list định nghĩa HTML, hay danh sách mô tả, được dùng để trình bày các cặp thuật ngữ và phần giải thích tương ứng.

Cấu trúc và vai trò của từng thẻ

Cấu trúc của loại danh sách này hơi khác một chút, nó bao gồm ba thẻ hoạt động cùng nhau:

• <dl> (Description List): Thẻ bao bọc toàn bộ danh sách.
• <dt> (Description Term): Thẻ chứa thuật ngữ, tên hoặc từ khóa cần định nghĩa.
• <dd> (Description Details): Thẻ chứa phần mô tả, giải thích cho thuật ngữ ngay phía trên nó.

Bạn có thể có nhiều cặp <dt> và <dd> trong cùng một <dl>. Thậm chí, một <dt> có thể có nhiều <dd>.

Trường hợp sử dụng thực tế của thẻ list mô tả

Bạn sẽ thấy danh sách này rất hữu ích khi:

• Tạo một trang từ điển hoặc bảng chú giải thuật ngữ.
• Liệt kê các cặp tên và giá trị, ví dụ như thông số kỹ thuật của một sản phẩm.
• Xây dựng một trang Hỏi-Đáp (FAQ), với <dt> là câu hỏi và <dd> là câu trả lời.

Ví dụ code

Đây là một ví dụ về cách dùng <dl> để giải thích một vài thuật ngữ HTML cơ bản.

<h2>Một vài thuật ngữ HTML</h2>
<dl>
  <dt>HTML</dt>
  <dd>Ngôn ngữ Đánh dấu Siêu văn bản, dùng để tạo cấu trúc cho trang web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets, dùng để tạo kiểu và định dạng cho trang web.</dd>

  <dt>Thẻ</dt>
  <dd>Là các phần tử cơ bản xây dựng nên một tài liệu HTML.</dd>
</dl>

Thẻ list lồng nhau trong HTML

Khi đã nắm vững các loại thẻ list cơ bản, bạn có thể nâng tầm cấu trúc nội dung của mình bằng thẻ list lồng nhau trong HTML. Kỹ thuật này cho phép bạn đặt một danh sách con vào bên trong một mục của danh sách cha. Rất tuyệt vời để tạo các hệ thống phân cấp phức tạp.

Nguyên tắc tạo một danh sách bên trong một danh sách khác

Nguyên tắc vàng ở đây rất đơn giản: Một danh sách mới (<ul> hoặc <ol>) phải được đặt bên trong một thẻ <li> của danh sách cha. Đây là một lỗi rất phổ biến mà người mới bắt đầu hay mắc phải. Bạn không thể đặt một <ul> trực tiếp bên trong một <ul> khác mà không có thẻ <li> bao bọc.

Ví dụ về danh sách lồng nhau kết hợp ul và ol

Hãy xem ví dụ về một thực đơn nhà hàng. Chúng ta có danh sách các món ăn chính, và trong mỗi món lại có danh sách các nguyên liệu.

<h2>Thực đơn</h2>
<ul>
  <li>
    Phở Bò
    <ol>
      <li>Bánh phở</li>
      <li>Thịt bò thái mỏng</li>
      <li>Hành lá</li>
      <li>Nước dùng xương hầm</li>
    </ol>
  </li>
  <li>
    Bún Chả
    <ol>
      <li>Bún tươi</li>
      <li>Chả nướng</li>
      <li>Rau sống</li>
      <li>Nước mắm chua ngọt</li>
    </ol>
  </li>
</ul>

Cách này giúp cấu trúc thông tin của bạn cực kỳ rõ ràng và có thứ bậc, dễ dàng cho cả người dùng và máy móc đọc hiểu.

Tùy chỉnh hiển thị danh sách

Ngày xưa, các thẻ HTML thường có nhiều thuộc tính để định dạng, ví dụ như thuộc tính type trên thẻ <ul>. Tuy nhiên, với sự phát triển của CSS, cách làm này đã trở nên lỗi thời.

Tại sao nên ưu tiên CSS để tạo kiểu cho danh sách?

Nguyên tắc của phát triển web hiện đại là tách biệt cấu trúc (HTML) và trình bày (CSS). Việc này mang lại rất nhiều lợi ích:

• Linh hoạt hơn: CSS cung cấp nhiều tùy chọn tạo kiểu hơn hẳn các thuộc tính HTML.
• Dễ bảo trì: Bạn có thể thay đổi kiểu dáng của tất cả danh sách trên toàn bộ website chỉ bằng cách sửa một vài dòng CSS, thay vì phải sửa từng thẻ HTML.
• Code sạch sẽ hơn: HTML của bạn sẽ gọn gàng và tập trung vào ngữ nghĩa, không bị rối bởi các thuộc tính định dạng.

Giới thiệu thuộc tính list-style-type và các giá trị phổ biến

Trong CSS, thuộc tính list-style-type là công cụ chính để bạn thay đổi kiểu dấu đầu dòng. Nó có thể áp dụng cho cả <ul> và <ol>.

Một vài giá trị phổ biến bạn có thể dùng:

• Cho <ul>: disc (đĩa tròn, mặc định), circle (vòng tròn), square (hình vuông).
• Cho <ol>: decimal (số 1, 2, 3), lower-roman (i, ii, iii), upper-alpha (A, B, C).

Cách loại bỏ hoàn toàn dấu đầu dòng

Đây là một trong những ứng dụng phổ biến nhất, đặc biệt là khi tạo menu điều hướng. Để xóa bỏ các dấu chấm đầu dòng, bạn chỉ cần dùng một dòng CSS đơn giản:

ul {
  list-style-type: none;
  padding-left: 0; /* Thường đi kèm để xóa khoảng đệm bên trái */
}

Cách này dễ lắm, bạn thử xem!

Tổng kết

Vậy là chúng ta đã cùng nhau khám phá mọi ngóc ngách của các thẻ list trong HTML. Đây là một kiến thức nền tảng nhưng vô cùng quan trọng mà bất kỳ ai làm web cũng cần phải nắm vững. Hãy cùng WiWeb điểm lại những ý chính nhé:

• HTML có 3 loại danh sách chính: <ul> (không thứ tự), <ol> (có thứ tự), và <dl> (mô tả).
• <li> là thẻ dùng để xác định từng mục trong danh sách <ul> và <ol>.
• <dl> sử dụng cặp thẻ <dt> (thuật ngữ) và <dd> (mô tả).
• Bạn có thể tạo danh sách lồng nhau bằng cách đặt một list mới bên trong một thẻ <li>.
• Hãy ưu tiên sử dụng CSS (với thuộc tính list-style-type) để tùy chỉnh kiểu dáng cho danh sách thay vì dùng thuộc tính HTML.

Bạn còn mẹo hay nào khác khi làm việc với các thẻ list trong HTML không? Hãy chia sẻ với WiWeb trong phần bình luận bên dưới nhé!

Và nếu bạn đang tìm kiếm một đối tác để thiết kế website chuyên nghiệp, đừng ngần ngại liên hệ với WiWeb. Chúng tôi luôn sẵn lòng giúp bạn biến ý tưởng thành hiện thực!