Tìm Hiểu Thẻ Danh sách HTML

Bạn có bao giờ tự hỏi tại sao các trang web lại thích sử dụng danh sách nhiều như vậy không? Trong bài học này chúng ta sẽ cùng nhau tìm hiểu thẻ danh sách HTML là gì và tính năng của nó trong trang web nhé!

Lợi Ích của thẻ danh sách HTML

• Dễ đọc: Danh sách giúp chia nhỏ thông tin phức tạp thành các phần nhỏ, dễ tiêu hóa hơn.
• Tính ứng dụng cao: Danh sách không chỉ dùng để liệt kê thông tin đơn thuần mà còn được sử dụng để tạo menu điều hướng, trình bày sản phẩm, hiển thị các bước hướng dẫn.
• Cấu trúc rõ ràng: Danh sách giúp người đọc dễ dàng nắm bắt thông tin, đặc biệt là khi bạn cần trình bày một loạt các mục có liên quan đến nhau.
• Dễ dàng tùy chỉnh: Với CSS, Danh sách có thể được thiết kế để trông bắt mắt và thu hút sự chú ý của người đọc.

Hai Loại Danh Sách Chính trong HTML

Trong HTML, chúng ta có hai loại danh sách chính:

1. Danh sách không thứ tự (Unordered Lists): Sử dụng dấu đầu dòng (bullet points) để liệt kê các mục.
2. Danh sách có thứ tự (Ordered Lists): Sử dụng số hoặc chữ cái để đánh số các mục.

1. Danh Sách Không Thứ Tự (<ul>)

Danh sách không thứ tự được sử 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 trong một công thức nấu ăn, danh sách các tính năng của một sản phẩm, hoặc danh sách các thành viên trong một nhóm.

Cú pháp:

<ul>
  <li>Mục 1</li>
  <li>Mục 2</li>
  <li>Mục 3</li>
</ul>

• <ul>: Đây là thẻ mở và đóng của danh sách không thứ tự. Tất cả các mục trong danh sách phải nằm bên trong thẻ này.
• <li>: Đây là thẻ mở và đóng của một mục danh sách (list item). Mỗi mục trong danh sách được bao bọc bởi thẻ này.

Ví dụ:

Hãy tạo một danh sách các món ăn yêu thích của bạn:

See the Pen
Thẻ danh sách không theo thứ tự HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Lưu ý: Thẻ <li> phải luôn nằm bên trong thẻ <ul> hoặc <ol>.

Khi bạn mở file HTML này trong trình duyệt, bạn sẽ thấy một danh sách các món ăn yêu thích của bạn, với mỗi món ăn được đánh dấu bằng một dấu đầu dòng.

Type: Xác định kiểu dấu đầu dòng (bullet) cho các mục trong danh sách. Tuy nhiên thuộc tính type đã lỗi thời trong HTML5 và đã được thay thế bằng CSS để tùy chỉnh rồi nhé.

Ngoài ra bạn có thể sử dụng danh sách HTML để tạo menu điều hướng cho trang web của bạn. Bạn có thể sử dụng CSS để loại bỏ dấu đầu dòng và tạo kiểu cho các mục danh sách để chúng trông giống như các nút điều hướng. Mình sẽ chia sẻ cách tạo menu điều hướng bằng thẻ danh sách HTML trong phần CSS nhé!

2. Danh Sách Có Thứ Tự (<ol>)

Danh sách có thứ tự được sử dụng khi thứ tự của các mục là quan trọng. Ví dụ: các bước trong một quy trình, danh sách các sự kiện theo thứ tự thời gian, hoặc danh sách xếp hạng.

Cú pháp:

<ol>
  <li>Bước 1</li>
  <li>Bước 2</li>
  <li>Bước 3</li>
</ol>

• <ol>: Đây là thẻ mở và đóng của danh sách có thứ tự.
• <li>: Tương tự như danh sách không thứ tự, đây là thẻ mở và đóng của một mục danh sách.

Ví dụ:

Hãy tạo một danh sách các bước để pha một tách cà phê sữa đá:

See the Pen
Thẻ danh sách theo thứ tự HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Khi bạn mở file HTML này trong trình duyệt, bạn sẽ thấy một danh sách các bước pha cà phê sữa đá, với mỗi bước được đánh số theo thứ tự.

3. Danh Sách Lồng Nhau (Nested List)

Danh sách lồng nhau là một danh sách nằm bên trong một danh sách khác. Điều này cho phép bạn tạo ra cấu trúc phân cấp phức tạp hơn.

Ví dụ:

See the Pen
danh sách lồng nhau trong HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Danh sách lồng nhau thường được sử dụng để tạo menu đa cấp, hiển thị cấu trúc thư mục, hoặc trình bày các thông tin có liên quan đến nhau theo từng cấp độ.

Bạn có thể thấy, việc lồng danh sách khá đơn giản. Tuy nhiên, khi cấu trúc trở nên phức tạp hơn, việc giữ cho code dễ đọc là vô cùng quan trọng. Đó là lúc mà thụt lề (indentation) phát huy tác dụng.

Hãy tưởng tượng nếu đoạn code trên được viết như thế này:

<ul>
<li>Mục lục 1</li>
<li>
Mục lục 2
<ul>
<li>Mục lục 2.1</li>
<li>Mục lục 2.2</li>
</ul>
</li>
<li>Mục lục 3</li>
</ul>

Khó đọc hơn phải không nào? Bạn phải “đọc” từng thẻ để hiểu được cấu trúc của danh sách.

Nhưng khi chúng ta thụt lề một cách có cấu trức:

<ul>
  <li>Mục lục 1</li>
  <li>
    Mục lục 2
    <ul>
      <li>Mục lục 2.1</li>
      <li>Mục lục 2.2</li>
    </ul>
  </li>
  <li>Mục lục 3</li>
</ul>

Chỉ cần nhìn sơ qua, bạn đã có thể thấy rõ ràng danh sách nào nằm trong danh sách nào rồi.

Tại Sao Thụt Lề Quan Trọng?

• Dễ đọc: Giúp bạn và người khác dễ dàng hiểu cấu trúc code.
• Dễ bảo trì: Khi cần chỉnh sửa hoặc thêm tính năng, bạn sẽ không mất thời gian “giải mã” code.
• Phát hiện lỗi: Thụt lề không nhất quán có thể là dấu hiệu của lỗi code.

4. Tùy Biến Danh Sách Với CSS

Mặc dù chúng ta chưa học CSS nhưng mình sẽ giới thiệu qua về cách thay đổi kiểu dấu đầu dòng trong HTML để bạn có thể nắm rõ hơn nhé.

Thay đổi kiểu dấu đầu dòng: Sử dụng thuộc tính list-style-type để thay đổi kiểu dấu đầu dòng cho danh sách không thứ tự. Ví dụ:

ul {
  list-style-type: square; /* Hình vuông */
}

Thay đổi kiểu đánh số: Sử dụng thuộc tính list-style-type để thay đổi kiểu đánh số cho danh sách có thứ tự. Ví dụ:

ol {
  list-style-type: upper-roman; /* Số La Mã in hoa */
}

• Ẩn dấu đầu dòng/đánh số: Sử dụng list-style-type: none; để ẩn dấu đầu dòng hoặc đánh số.
• Sử dụng hình ảnh làm dấu đầu dòng: Sử dụng thuộc tính list-style-image để thay thế dấu đầu dòng bằng hình ảnh.
• Tùy chỉnh khoảng cách và căn chỉnh: Sử dụng các thuộc tính margin, padding, text-align để tùy chỉnh khoảng cách và căn chỉnh của danh sách.

Tổng Kết

Trong bài học này, bạn đã học được về hai loại danh sách chính trong HTML: danh sách không thứ tự (<ul>) và danh sách có thứ tự (<ol>). Bạn cũng đã học cách sử dụng thẻ <li> để tạo các mục danh sách, và cách lồng danh sách để tạo ra cấu trúc phức tạp hơn.

Mong bài viết này sẽ hữu ích và hãy cứ cố gắng để trở thành nhà lập trình web trong tương lai bạn nhé! Chúc bạn thành công trên con đường mình đã chọn.