Tài liệu HTML chạy trực tiếp: Danh sách

Q: Làm sao tạo gạch đầu dòng trong HTML?

Dùng danh sách không thứ tự: với mỗi cho một dòng, ví dụ Milk Eggs . Trình duyệt vẽ một dấu đầu dòng trước mỗi mục và thụt lề danh sách.

Q: Làm sao bỏ dấu đầu dòng của danh sách trong HTML?

Đặt list-style: none cho trong CSS. Đặt thêm padding-inline-start: 0 (hoặc padding: 0) để bỏ phần thụt lề mà trình duyệt thêm vào cho dấu đầu dòng.

Q: Làm sao cho danh sách có thứ tự bắt đầu từ số khác?

Dùng thuộc tính start: đánh số mục đầu tiên là 5. reversed đếm ngược, còn value trên một đặt số cho mục đó và các mục sau nó.

Q: Làm sao tạo danh sách lồng nhau trong HTML?

Đặt hoặc bên trong vào một của danh sách bên ngoài, sau phần chữ của mục đó. Một danh sách nằm trực tiếp trong khác, giữa các phần tử , là không hợp lệ.

Danh sách trong HTML: gạch đầu dòng, đánh số và lồng nhau

Cách tạo danh sách trong HTML: gạch đầu dòng với <ul>, danh sách đánh số với <ol> (start, reversed, chữ cái và số La Mã), danh sách lồng nhau, danh sách mô tả, và cách định dạng hoặc bỏ dấu đầu dòng bằng CSS.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

Danh sách trong HTML: ul, ol và li

HTML có hai loại danh sách chính. <ul> (unordered list, danh sách không thứ tự) hiển thị gạch đầu dòng, còn <ol> (ordered list, danh sách có thứ tự) hiển thị số. Mỗi mục là một <li> (list item).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Dùng <ol> khi thứ tự có ý nghĩa (các bước, bảng xếp hạng, mục lục) và <ul> khi không. Trình đọc màn hình đọc cả hai là danh sách kèm số lượng, kiểu "list, 3 items", nên một danh sách thật tốt hơn những dòng tự gõ "•" hay "1." ở đầu.

Một danh sách chỉ được chứa trực tiếp các phần tử <li>. Mọi thứ khác, kể cả tiêu đề, đoạn văn và danh sách khác, đều phải nằm trong một <li>.

Kiểu dấu đầu dòng

list-style-type trên <ul> thay đổi dấu đầu dòng. Pseudo-element ::marker định dạng riêng chính dấu đầu dòng hoặc con số, tách biệt với phần chữ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Một giá trị chuỗi sẽ dùng chính chuỗi đó làm dấu đầu dòng. "\2713 " là dấu tích theo sau là một khoảng trắng: khoảng trắng đầu tiên chỉ để kết thúc chuỗi escape \2713. ::marker chỉ nhận vài thuộc tính, chủ yếu là color, font-size và các thuộc tính font khác, đủ cho yêu cầu phổ biến "dấu đầu dòng có màu" mà không cần thêm markup.

Danh sách có thứ tự: số, chữ cái và số La Mã

<ol> có các thuộc tính để đánh số:

Thuộc tính	Ví dụ	Kết quả
`type`	`type="a"`	a, b, c (`A`, `i`, `I` và `1` cũng dùng được)
`start`	`start="5"`	Bắt đầu đếm từ 5
`reversed`	`reversed`	Đếm ngược
`value` (trên `<li>`)	`<li value="10">`	Mục này là 10, các mục sau đếm tiếp từ đó

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

Dùng type trong HTML là ổn vì chữ cái có thể mang ý nghĩa ("chọn phương án B"). Với thay đổi thuần về hình thức, CSS list-style-type: upper-alpha hoặc lower-roman cho kết quả tương tự.

Danh sách lồng nhau

Danh sách con nằm bên trong <li> mà nó thuộc về, sau phần chữ của mục đó. Trình duyệt đổi dấu đầu dòng ở mỗi cấp: hình tròn đặc, rồi hình tròn rỗng, rồi hình vuông.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Chú ý vị trí của </li>: mục "Frontend" chỉ đóng sau danh sách con của nó. Đóng nó trước <ul> sẽ đặt danh sách con trực tiếp trong <ul> bên ngoài, điều này không hợp lệ dù trông gần như giống hệt.

Danh sách có thứ tự cũng lồng nhau theo cách tương tự, và việc đánh số bắt đầu lại từ 1 ở mỗi danh sách con. Để có số dạng 1.1 và 1.2, bạn cần dùng CSS counter.

Danh sách mô tả: dl, dt và dd

Danh sách mô tả ghép các thuật ngữ với phần mô tả của chúng: một bảng thuật ngữ, chi tiết đơn hàng, các cặp kiểu hỏi đáp. <dt> là thuật ngữ và <dd> là phần mô tả:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

Một thuật ngữ có thể có nhiều <dd>, và nhiều <dt> có thể dùng chung một <dd>. Trình duyệt mặc định thụt lề <dd>; quy tắc margin ở trên bỏ phần thụt lề đó. Với dữ liệu có nhiều cột, bảng là lựa chọn phù hợp hơn.

Menu điều hướng là danh sách các liên kết. Bỏ dấu đầu dòng bằng list-style: none và thụt lề bằng padding: 0, rồi xếp các mục thành một hàng bằng flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Với trình đọc màn hình, đây vẫn là một danh sách ("navigation, list, 3 items"). Có một ngoại lệ: Safari với VoiceOver có thể bỏ ý nghĩa danh sách khi dấu đầu dòng bị xóa. Nếu số lượng mục quan trọng với người dùng, hãy thêm role="list" vào <ul>.

Khoảng cách mặc định

Trình duyệt cho danh sách margin trên và dưới 1em và thụt lề bằng padding-inline-start: 40px, đó là chỗ dấu đầu dòng nằm. Padding nằm ở phía đầu dòng, nên với các ngôn ngữ viết từ phải sang trái, dấu đầu dòng và thụt lề tự động chuyển sang phía bên kia. Bỏ padding đi thì dấu đầu dòng nằm ra ngoài khung danh sách và có thể bị cắt mất; hãy giữ lại một ít padding hoặc dùng list-style-position: inside.

Lỗi thường gặp

<li> không có danh sách cha. Nó phải nằm trong <ul>, <ol> hoặc <menu>.
Danh sách lồng nằm ngoài <li> của nó. Đặt danh sách con vào bên trong mục mà nó thuộc về.
Chữ hoặc thẻ khác nằm trực tiếp trong <ul>, như <ul><p>Note</p><li>...</li></ul>. Chuyển chúng vào một <li> hoặc ra ngoài danh sách.
Tự gõ dấu đầu dòng hoặc số bằng • và <br>. Trình đọc màn hình chỉ nghe thấy một đoạn văn, không phải danh sách.
list-style: none mà không có padding: 0, để lại khoảng thụt 40 pixel khó hiểu.
Dùng <ol> chỉ vì hình thức. Nếu thứ tự không quan trọng, hãy dùng <ul> và định dạng cho nó.

Câu hỏi thường gặp

Làm sao tạo gạch đầu dòng trong HTML?

Dùng danh sách không thứ tự: <ul> với mỗi <li> cho một dòng, ví dụ <ul><li>Milk</li><li>Eggs</li></ul>. Trình duyệt vẽ một dấu đầu dòng trước mỗi mục và thụt lề danh sách.

ul và ol khác nhau thế nào?

<ul> là danh sách không thứ tự, hiển thị bằng dấu đầu dòng, cho các mục mà thứ tự không quan trọng. <ol> là danh sách có thứ tự, hiển thị bằng số, cho các bước và bảng xếp hạng nơi thứ tự có ý nghĩa. Cả hai đều chứa các mục <li>.

Làm sao bỏ dấu đầu dòng của danh sách trong HTML?

Đặt list-style: none cho <ul> trong CSS. Đặt thêm padding-inline-start: 0 (hoặc padding: 0) để bỏ phần thụt lề mà trình duyệt thêm vào cho dấu đầu dòng.

Làm sao cho danh sách có thứ tự bắt đầu từ số khác?

Dùng thuộc tính start: <ol start="5"> đánh số mục đầu tiên là 5. reversed đếm ngược, còn value trên một <li> đặt số cho mục đó và các mục sau nó.

Làm sao tạo danh sách lồng nhau trong HTML?

Đặt <ul> hoặc <ol> bên trong vào một <li> của danh sách bên ngoài, sau phần chữ của mục đó. Một danh sách nằm trực tiếp trong <ul> khác, giữa các phần tử <li>, là không hợp lệ.

Khái niệm liên quan