Danh sách trong HTML

Danh sách giúp trình bày các ý một cách gọn gàng. HTML có ba loại: danh sách không thứ tự, có thứ tự và danh sách mô tả; danh sách còn là nền tảng của menu điều hướng.

25 phútCơ bản
Bạn sẽ học được
  • Tạo ul, ol, dl
  • Đổi kiểu đánh số, ký hiệu
  • Lồng danh sách nhiều cấp
  • Biến danh sách thành menu ngang

Một số khái niệm

<ul> (unordered) khi thứ tự không quan trọng; <ol> (ordered) khi thứ tự có ý nghĩa như các bước làm; <dl> cho cặp thuật ngữ – định nghĩa. Mỗi mục là <li>.

Ba loại danh sách

<ul>
  <li>Cà phê</li><li>Chè</li>
</ul>
<ol>
  <li>Bật máy tính</li><li>Mở VS Code</li><li>Tạo tệp index.html</li>
</ol>
<dl>
  <dt>HTML</dt><dd>Ngôn ngữ đánh dấu</dd>
  <dt>CSS</dt><dd>Ngôn ngữ định dạng</dd>
</dl>
Kết quả hiển thị
  • Cà phê
  • Chè
  1. Bật máy tính
  2. Mở VS Code
  3. Tạo tệp index.html
HTML
Ngôn ngữ đánh dấu
CSS
Ngôn ngữ định dạng

Kiểu đánh số và lồng nhau

<ol type="A" start="3">
  <li>Mục C</li><li>Mục D</li>
</ol>
<ol type="I"><li>La Mã I</li><li>La Mã II</li></ol>
<ul style="list-style-type: square;">
  <li>Lập trình
    <ul style="list-style-type: circle;">
      <li>Python</li><li>JavaScript</li>
    </ul>
  </li>
</ul>
Kết quả hiển thị
  1. Mục C
  2. Mục D
  1. La Mã I
  2. La Mã II
  • Lập trình
    • Python
    • JavaScript

Menu ngang từ danh sách

<style>
  .menu-ngang { list-style: none; padding: 0; display: flex; gap: 4px; }
  .menu-ngang a { display: block; padding: 8px 14px; background: #2e7d32; color: #fff; text-decoration: none; }
  .menu-ngang a:hover { background: #1b5e20; }
</style>
<ul class="menu-ngang">
  <li><a href="#">Trang chủ</a></li><li><a href="#">Khóa học</a></li><li><a href="#">Liên hệ</a></li>
</ul>
Kết quả hiển thị
Mẹo hay

Thuộc tính reversed trên ol đếm ngược: hữu ích cho bảng xếp hạng “Top 10”.

Thực hành
  1. Viết công thức nấu ăn: nguyên liệu (ul), các bước (ol).
  2. Tạo danh sách mô tả 5 thuật ngữ tin học.
  3. Tạo menu ngang 5 mục cho website cá nhân.
Tóm tắt bài học
  • ul không thứ tự, ol có thứ tự, dl mô tả.
  • type, start, reversed chỉnh cách đánh số.
  • Danh sách lồng nhau tạo nhiều cấp; menu thường là ul.