Bài 6: Các thẻ tạo danh sách (list) trong HTML

Trong bài này chúng ta sẽ cùng nhau đi tìm hiểu về thẻ tạo danh sách (tạo list) trong HTML. Trong HTML việc tạo các phần tử danh sách cũng được sử dụng khá thường xuyên, chẳng hạn như tạo menu, tạo danh sách chuyên mục,… Vậy nên bài này mình muốn giới thiệu với các bạn các loại thẻ để tạo list và các sử dụng của từng thẻ.

Các thẻ tạo danh sách trong HTML

Trong HTML chúng ta có 3 kiểu tạo danh sách đó là danh sách có sắp xếp (ordered list), danh sách không sắp xếp (unordered list) và danh sách mô tả (description list). Dưới đây chúng ta sẽ đi vào cách dùng từng kiểu danh sách cụ thể.

Kiểu danh sách sắp xếp (Ordered List)

Kiểu danh sách sắp xếp là kiểu hiển thị danh sách các mục bên trong nó được sắp xếp theo thứ tự đánh số hoặc chữ cái. Để tạo danh sách kiểu này chúng ta bắt đầu bằng cặp thẻ <ol> </ol> và chứa bên trong nó là các cặp thẻ <li> có chứa nội dung của danh sách.

Ví dụ:

<ol>
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ol>

Như đã nói ở trên là bạn có thể sắp xếp danh sách theo chữ số hoặc chữ cái nên trong thẻ <ol> chúng ta sẽ phải thêm thuộc tính type để thiết lập kiểu sắp xếp. Giá trị của thuộc tính type là 1, a, A, i, I.

Ví dụ:

<ol type= "A">
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ol>

Kiểu danh sách không sắp xếp (Unordered List)

Kiểu danh sách không sắp xếp được bắt đầu bằng cặp thẻ <ul> </ul> và bên trong cũng được khai báo bởi cặp thẻ <li> </li> .

Ví dụ:

<ul>
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ul>

Kiểu danh sách này cũng hỗ trợ bạn thay đổi kiểu các ký tự đánh dấu bằng thuộc style với thuộc tính CSS là list-style-type đi kèm với các giá trị disc, circle, square và none.

Ví dụ:

<ul style="list-style-type: circle">
  <li>Danh sách 1</li>
  <li> Danh sách 2</li>
  <li> Danh sách 3</li>
</ul>

Kiểu danh sách mô tả (Description List)

Kiểu danh sách mô tả này khác với 2 kiểu trên đó là nó được bắt đầu bằng cặp thẻ <dl> </dl> và các danh sách bên trong được khai báo bằng cặp thẻ <dt> </dt> và sẽ có thêm đoạn mô tả cho chúng nằm trong cặp thẻ <dd> </dd> .

Ví dụ:

<dl>
  <dt>HTML</dt>
  <dd>Tạo nên cấu trúc trang web</dd>
  <dt>CSS</dt>
  <dd>Để trang trí cho web</dd>
  <dt>Javascript</dt>
  <dd>Thêm hiệu ứng cho web</dd>
</dl>

Lồng các danh sách với nhau

Trong HTML, sẽ không đơn thuần là tạo 1 kiểu danh sách là hết mà bạn còn có thể lồng các kiểu danh sách vào với nhau để tạo thành 1 danh sách đa cấp. Để làm việc đó bạn chỉ cần chèn thêm 1 danh sách nữa vào giữa cặp thẻ <li> </li> là được.

Ví dụ:

<ul>
  <li>Back-End
    <ol>
      <li>PHP</li>
      <li>Python</li>
      <li>.Net</li>
    </ol>
  </li>
  <li>Front-End
    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript</li>
    </ol>
  </li>
</ul>

Lời kết

Việc tạo các danh sách trong HTML cũng khá đơn giản đúng không nào. Mà nói chung thì học HTML nó cũng không phải là cái gì đó quá khó học. Các bạn chỉ cần chịu khó theo dõi các bài viết trên NguyenHungPlus.Com thì sẽ sớm làm dc 1 trang web HTML thôi. Chúc các bạn thành công!