Danh sách trong HTML

1.1 Các loại danh sách

Danh sách trong HTML là một công cụ quan trọng để tổ chức và cấu trúc thông tin. Chúng cho phép hiển thị các phần tử với số hoặc điểm nhấn mạnh (dấu chấm). Hãy cùng xem xét chi tiết từng phần tử trong danh sách HTML: <ul>, <ol>, và <li>.

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

Thẻ <ul> được sử dụng để tạo danh sách không thứ tự (có dấu chấm) để các phần tử hiển thị với dấu chấm (điểm, vòng tròn, ô vuông).

Ví dụ:

    
      <ul>
        <li>Phần tử đầu tiên của danh sách</li>
        <li>Phần tử thứ hai của danh sách</li>
        <li>Phần tử thứ ba của danh sách</li>
      </ul>
    
  

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

Thẻ <ol> được sử dụng để tạo danh sách có thứ tự. Các phần tử của danh sách hiển thị với số hoặc chữ cái.

Ví dụ:

    
      <ol>
        <li>Phần tử đầu tiên của danh sách</li>
        <li>Phần tử thứ hai của danh sách</li>
        <li>Phần tử thứ ba của danh sách</li>
      </ol>
    
  

1.2 Phần tử danh sách <li>

Thẻ <li> được sử dụng để chỉ định từng phần tử trong danh sách, dù là danh sách không thứ tự hay có thứ tự. Nó luôn phải được đặt bên trong <ul> hoặc <ol>.

Làm thế nào để nhớ các thẻ này dễ dàng:

• Ordered List – danh sách có thứ tự
• Unordered List – danh sách không thứ tự
• List Item – phần tử danh sách

Thuộc tính type

Thuộc tính này có thể được sử dụng trong <ul> và <ol> để thay đổi loại dấu hoặc kiểu đánh số. Ví dụ, cho <ol> có thể sử dụng các giá trị "1", "A", "a", "I", "i", và cho <ul> là "disc", "circle", "square".

Ví dụ về việc thay đổi kiểu dấu cho <ul>:

    
      <ul type="square">
        <li>Phần tử đầu tiên của danh sách</li>
        <li>Phần tử thứ hai của danh sách</li>
      </ul>
    
  

Ví dụ về việc thay đổi kiểu đánh số cho <ol>:

    
      <ol type="A">
        <li>Phần tử đầu tiên của danh sách</li>
        <li>Phần tử thứ hai của danh sách</li>
      </ol>
    
  

Thuộc tính start:

Thuộc tính này chỉ được sử dụng với <ol> để chỉ định số bắt đầu của danh sách.

Ví dụ:

    
      <ol start="5">
        <li>Phần tử thứ năm của danh sách</li>
        <li>Phần tử thứ sáu của danh sách</li>
      </ol>
    
  

Danh sách lồng nhau

Danh sách có thể được lồng nhau, điều này cho phép tạo ra các cấu trúc phức tạp hơn.

Ví dụ về danh sách lồng nhau:

    
      <ul>
        <li>Phần tử đầu tiên của danh sách</li>
          <ul type="circle">
            <li>Phần tử đầu tiên lồng nhau</li>
            <li>Phần tử thứ hai lồng nhau</li>
          </ul>
        <li>Phần tử thứ hai của danh sách</li>
        <li>Phần tử thứ ba của danh sách</li>
      </ul>
    
  

1.3 Tạo kiểu cho danh sách

Danh sách có thể được tạo kiểu bằng CSS, thay đổi màu của điểm, loại điểm và khoảng cách.

Ví dụ về tạo kiểu:

    
      ul.custom-list {
        list-style-type: katakana; /* Ký tự Katakana của Nhật Bản */
        color: blue; /* Màu của văn bản */
      }

      ol.custom-list {
        list-style-type: hiragana-iroha; /* Hệ thống sắp xếp Hiragana của Nhật Bản */
        color: green; /* Màu của văn bản */
      }
    
  

    
      <ul class="custom-list">
        <li>Phần tử đầu tiên của danh sách</li>
        <li>Phần tử thứ hai của danh sách</li>
      </ul>

      <ol class="custom-list">
        <li>Phần tử đầu tiên của danh sách</li>
        <li>Phần tử thứ hai của danh sách</li>
      </ol>
    
  

Như vậy, việc sử dụng <ul>, <ol>, và <li> giúp cấu trúc nội dung và cải thiện khả năng đọc của nó trên các trang web.