Tạo danh sách không thứ tự (unordered list) với HTML <ul>

Thẻ <ul> tạo danh sách bullet points, kết hợp <li> cho từng mục.

Thuộc tính (Deprecated - dùng CSS thay thế)

Ví dụ cơ bản

<!DOCTYPE html>
<html>
<head>
  <title>HTML ul Tag</title>
  <style>
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; }
    ul { margin: 10px 0; padding-left: 20px; }
    li { margin: 8px 0; }
    .custom-bullets { list-style: none; padding-left: 0; }
    .custom-bullets li { 
      position: relative; padding-left: 1.5em; 
    }
    .custom-bullets li::before {
      content: "▸"; color: #007bff; position: absolute; left: 0;
    }
  </style>
</head>
<body>
  <h1>Danh Sách Không Thứ Tự (UL)</h1>
  <p>Quốc gia:</p>
  <ul>
    <li>Việt Nam</li>
    <li>Mỹ</li>
    <li>Nhật Bản</li>
    <li>Úc</li>
    <li>Bangladesh</li>
  </ul>
  
  <h2>Bullet tùy chỉnh với CSS</h2>
  <ul class="custom-bullets">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</body>
</html>

Kết quả

• Danh sách 5 quốc gia với bullet mặc định (disc - chấm tròn đen)
• Danh sách 3 công nghệ với bullet mũi tên xanh tùy chỉnh (::before)

CSS list-style-type hiện đại

ul { list-style-type: disc; }      /* Chấm tròn (mặc định) */
ul { list-style-type: circle; }    /* Vòng tròn rỗng */
ul { list-style-type: square; }    /* Vuông */
ul { list-style-type: "🌟 "; }     /* Emoji/custom string (CSS3) */
ul { list-style-type: none; }      /* Không bullet */
ul { list-style-image: url('icon.png'); }  /* Hình ảnh bullet */

Nested list (danh sách lồng)

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>