Trong series này:

HTML Cấu trúc trang HTML Văn bản và định dạng Liên kết và điều hướng Hình ảnh và đa phương tiện Danh sách Bảng dữ liệu Form và input Phần tử Semantic HTML5 Audio, Video và Canvas Meta tags và phần head
Sửa trang này

Danh sách

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

Dùng khi thứ tự các mục không quan trọng. Mỗi mục là một <li>.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Mặc định hiển thị với dấu chấm tròn (bullet). Có thể đổi kiểu bằng CSS list-style-type.

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

Dùng khi thứ tự quan trọng (các bước hướng dẫn, xếp hạng).

<ol>
  <li>Mở trình soạn thảo</li>
  <li>Viết code HTML</li>
  <li>Lưu file với đuôi .html</li>
  <li>Mở trong trình duyệt</li>
</ol>

Thuộc tính của <ol>

Thuộc tính Ý nghĩa Ví dụ
type Kiểu đánh số "1" (mặc định), "A", "a", "I", "i"
start Bắt đầu từ số nào start="5" → bắt đầu từ 5
reversed Đếm ngược reversed 
<ol type="A" start="3">
  <li>Mục C</li>
  <li>Mục D</li>
</ol>

Danh sách định nghĩa <dl>

Dùng để trình bày cặp thuật ngữ – định nghĩa (như từ điển, thuật ngữ).

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — ngôn ngữ đánh dấu siêu văn bản</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — ngôn ngữ định kiểu trang web</dd>
</dl>
  • <dt> — thuật ngữ (definition term)
  • <dd> — định nghĩa (definition description), thường được thụt lề

Danh sách lồng nhau

Có thể lồng <ul> hoặc <ol> bên trong <li> để tạo danh sách nhiều cấp:

<ul>
  <li>Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Back-end</li>
</ul>

Ví dụ — ul, ol và dl

    Kết quả 
    <h3>Danh sách không thứ tự (&lt;ul&gt;)</h3>
<ul>
  <li>Cà chua</li>
  <li>Bí ngô</li>
  <li>Khoai tây</li>
</ul>

<h3>Danh sách có thứ tự (&lt;ol&gt;)</h3>
<ol>
  <li>Đun sôi nước</li>
  <li>Cho mì vào</li>
  <li>Đợi 3 phút</li>
  <li>Vớt ra và thưởng thức</li>
</ol>

<h3>Danh sách kiểu chữ cái (&lt;ol type="A"&gt;)</h3>
<ol type="A">
  <li>Phương án A</li>
  <li>Phương án B</li>
  <li>Phương án C</li>
</ol>

<h3>Danh sách định nghĩa (&lt;dl&gt;)</h3>
<dl>
  <dt>HTML</dt>
  <dd>Ngôn ngữ đánh dấu siêu văn bản — tạo cấu trúc trang web</dd>
  <dt>CSS</dt>
  <dd>Ngôn ngữ định kiểu — trang trí giao diện</dd>
  <dt>JavaScript</dt>
  <dd>Ngôn ngữ lập trình — thêm tính tương tác</dd>
</dl>

    Ví dụ — Danh sách lồng nhau

      Kết quả 
      <h3>Lộ trình học lập trình web</h3>
<ol>
  <li>Nền tảng
    <ul>
      <li>HTML — cấu trúc</li>
      <li>CSS — giao diện</li>
      <li>JavaScript — tương tác</li>
    </ul>
  </li>
  <li>Framework Front-end
    <ul>
      <li>React</li>
      <li>Vue</li>
      <li>Angular</li>
    </ul>
  </li>
  <li>Back-end
    <ul>
      <li>Node.js / Express</li>
      <li>Python / Django</li>
    </ul>
  </li>
  <li>Cơ sở dữ liệu
    <ul>
      <li>SQL (MySQL, PostgreSQL)</li>
      <li>NoSQL (MongoDB)</li>
    </ul>
  </li>
</ol>

      Bình luận