Kiểu danh sách trong HTML

Trong HTML có rất nhiều loại danh sách như: danh sách không có thứ tự, danh sách có thứ tự, danh sách hai cấp, danh sách ba cấp,….

Ví dụ:

Danh sách không thứ tự Danh sách có thứ tự
  • HTML/CSS
  • JavaScript
  • Server Side
  1. HTML/CSS
  2. JavaScript
  3. Server Side

Tạo danh sách không có thứ tự

Để tạo một danh sách không có thứ tự, ta thực hiện theo các bước sau:

Dùng cặp thẻ <ul></ul> để xác định một danh sách không có thứ tự và các phần tử trong danh sách bằng cặp thẻ <li></li>

Để xác định kiểu danh sách ta sử dụng thuộc tính type= “kiểu danh sách” vào trong thẻ <ul>.

Trong đó, kiểu danh sách có thể là:

disc (tạo ký hiệu chấm tròn đen phía trước danh sách)

circle (tạo ký hiệu chấm tròn trắng phía trước danh sách)

square (tạo ký hiệu ô vuông đen phía trước danh sách)

none (không tạo ký hiệu phía trước danh sách)

Ví dụ

Tạo danh sách có thứ tự

Để tạo một danh sách có thứ tự, ta thực hiện theo các bước sau:

Dùng cặp thẻ <ol></ol> để xác định một danh sách có thứ tự và các phần tử trong danh sách bằng cặp thẻ <li></li>

Đặt thuộc tính type= “kiểu danh sách” vào trong thẻ <ol> để xác định kiểu cho danh sách.

Trong đó, kiểu danh sách có thể là:

Kiểu Mô rả
1 Tạo số 1, 2, 3, 4,…. phía trước danh sách
a Tạo chữ cái a, b, c, d,…. phía trước danh sách
A Tạo chữ cái A, B, C, D,…. phía trước danh sách
i Tạo số la mã i, ii, iii, iv,…. phía trước danh sách
I Tạo số la mã I, II, III, IV,…. phía trước danh sách

Ví dụ

Tạo danh sách hai cấp

Để tạo danh sách hai cấp, ta lồng danh sách cấp hai vào bên trong danh sách cấp một.

Ví dụ

Ở ví dùng trên, danh sách cấp 1 tôi dùng kiểu <ol>, danh sách cấp 2 dùng kiểu <ul>. Tuy nhiên, không nhất thiết cấp 1 là phải dùng <ol> cấp 2 dùng <ul>, bạn thích dùng kiểu gì thì dùng.

Cũng với quy tắc lồng danh sách đó, chúng ta có thể tạo danh sách cấp 3, cấp 4,….

Ví dụ

Tạo danh sách mô tả

Để tạo một danh sách mô tả, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <dl></dl> để xác định một danh sách mô tả và các phần tử trong danh sách bằng cặp thẻ <dt></dt>

Bước 2: Xác định các ý chính của danh sách bằng cặp thẻ <dt></dt>

Bước 3: Dùng cặp thẻ <dd></dd> để xác định các miệu tả, và đặt chúng dưới các ý chính của danh sách.

Ví dụ

Học HTML