Các thẻ danh sách trong HTML

Trong bài học này, chúng ta sẽ học cách sử dụng các thẻ danh sách trong HTML để trình bày thông tin theo dạng danh sách có thứ tự, không thứ tự và danh sách định nghĩa. Các thẻ danh sách giúp bạn tổ chức và hiển thị thông tin một cách rõ ràng, dễ hiểu.

1. Danh sách có thứ tự: <ol>

1.1 Thẻ <ol> là gì?

Thẻ <ol> (ordered list) dùng để tạo danh sách có thứ tự. Mỗi mục trong danh sách được đánh số tự động, giúp trình bày các thông tin có thứ tự, như hướng dẫn, quy trình, v.v.

Cấu trúc:

<ol>
  <li>Thứ nhất</li>
  <li>Thứ hai</li>
  <li>Thứ ba</li>
</ol>

Ví dụ:

<h2>Các bước học HTML</h2>
<ol>
  <li>Tìm hiểu về HTML cơ bản</li>
  <li>Thực hành viết mã HTML</li>
  <li>Kiểm tra và sửa lỗi trong mã HTML</li>
</ol>

• Lưu ý:
  • Các mục trong danh sách được đánh số tự động, bạn không cần phải thêm số vào trong nội dung các thẻ <li>.
  • Thẻ <ol> là thẻ tự đóng, và mỗi mục trong danh sách được tạo bằng thẻ <li>.

2. Danh sách không thứ tự: <ul>

2.1 Thẻ <ul> là gì?

Thẻ <ul> (unordered list) dùng để tạo danh sách không có thứ tự. Mỗi mục trong danh sách được đánh dấu bằng một dấu chấm (hoặc dấu phân cách khác tùy thuộc vào CSS). Đây là kiểu danh sách dùng để trình bày các thông tin không có sự phân loại hoặc thứ tự cụ thể.

Cấu trúc:

<ul>
  <li>Thứ nhất</li>
  <li>Thứ hai</li>
  <li>Thứ ba</li>
</ul>

Ví dụ:

<h2>Các môn học yêu thích</h2>
<ul>
  <li>Toán</li>
  <li>Lịch sử</li>
  <li>Văn học</li>
</ul>

• Lưu ý:
  • Mỗi mục trong danh sách được tạo bằng thẻ <li>.
  • Dấu chấm (hoặc dấu phân cách khác) mặc định được hiển thị trước mỗi mục trong danh sách.

3. Danh sách định nghĩa: <dl>, <dt>, <dd>

3.1 Thẻ <dl> là gì?

Thẻ <dl> (definition list) dùng để tạo danh sách định nghĩa, thích hợp cho việc trình bày các thuật ngữ và định nghĩa của chúng. Danh sách này khác biệt so với các danh sách có thứ tự và không thứ tự vì nó không đánh số hay dùng dấu chấm, mà thay vào đó, sử dụng thẻ <dt> cho thuật ngữ và thẻ <dd> cho định nghĩa.

Cấu trúc:

<dl>
  <dt>Thuật ngữ 1</dt>
  <dd>Định nghĩa của thuật ngữ 1</dd>
  <dt>Thuật ngữ 2</dt>
  <dd>Định nghĩa của thuật ngữ 2</dd>
</dl>

Ví dụ:

<h2>Các thuật ngữ về HTML</h2>
<dl>
  <dt>HTML</dt>
  <dd>Là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo trang web.</dd>
  <dt>Thẻ</dt>
  <dd>Đơn vị cơ bản trong HTML dùng để tạo nội dung.</dd>
</dl>

• Lưu ý:
  • Thẻ <dl> chứa danh sách định nghĩa.
  • Thẻ <dt> dùng để chỉ thuật ngữ.
  • Thẻ <dd> dùng để chỉ định nghĩa của thuật ngữ.

Mục tiêu đạt được sau bài học

• Hiểu cách sử dụng các thẻ danh sách để trình bày thông tin.
• Biết cách tạo danh sách có thứ tự và không thứ tự.
• Làm quen với cách sử dụng danh sách định nghĩa cho các thuật ngữ hoặc mô tả.

Bài tập thực hành

Bài tập 1:

1. Tạo một trang HTML với một danh sách có thứ tự mô tả các bước làm việc.
2. Tạo một danh sách không thứ tự liệt kê các sở thích của bạn.
3. Tạo một danh sách định nghĩa với một số thuật ngữ trong HTML và định nghĩa của chúng.

Bài tập 2:

• Sử dụng các thẻ <ol>, <ul>, và <dl> để tạo một danh sách thông tin về các công nghệ lập trình, các bước thực hiện dự án, và các thuật ngữ về lập trình.

Kết luận

Trong bài học này, bạn đã học cách sử dụng các thẻ danh sách trong HTML, bao gồm danh sách có thứ tự (<ol>), danh sách không thứ tự (<ul>), và danh sách định nghĩa (<dl>). Các thẻ này giúp bạn tổ chức và trình bày thông tin một cách rõ ràng, dễ hiểu và dễ tiếp cận cho người đọc. Bạn cũng có thể sử dụng các thẻ này để cải thiện cấu trúc nội dung trang web của mình.