[Bài 7] Cách tạo danh sách, list trong html

Cách tạo danh sách, list trong html

Hôm nay mình sẽ hướng dẫn các bạn cách tạo danh sách trong html. Trong các đoạn văn bản thì chúng ta không thể thiếu các kiểu danh sách này nếu muốn làm các mục lục, menu hoặc danh sách gì đó. Bằng các thẻ ul, ol, dl chúng ta có thể tạo ra nhiều kiểu danh sách khác nhau. Cùng bắt đầu tìm hiểu nhé.

Có 3 loại thẻ đó là ul(Unordered List), ol(Ordered List) và dl(Description List) những vẫn thường được sử dụng nhất vẫn là ul và ol

Thẻ ul: không có thứ tự

Để khai báo danh sách không có thứ tự chúng ta bao ngoài với cặp thẻ <ol></ol> và trong đó mỗi danh sách chúng ra viết trong cặp thẻ <li></li>

<ul>
    <li>cam</li>
    <li>quýt</li>
    <li>cậy</li>
    <li>hồng</li>
</ul>

Thẻ <ol></ol> hỗ trợ thêm thuộc tính tên là type, thuộc tính này là để thiết lập kiểu sắp xếp các mục con bên trong danh sách. Các giá trị của thuộc tính type là disc, circle, square và none.
Demo:

See the Pen vLWjvJ by BlogIT.vn on CodePen.

Thẻ ol: có thứ tự

Tương tự như thẻ ul nhưng thẻ ol nó sẽ có hiển thị thứ tự các danh sách, thuộc tính type của nó có các loại 1, i, I, a, A.

<ol>
    <li>cam</li>
    <li>quýt</li>
    <li>cậy</li>
    <li>hồng</li>
</ol>

Demo:

See the Pen yePEJL by BlogIT.vn on CodePen.

Thẻ dl: mô tả

Kiểu danh sách này khác với 2 kiểu trên, nó được bao ngoài là thẻ <dl>, mỗi mục con được bao bởi thẻ <dt> và mô tả của nó được bao bởi thẻ <dd>

<p>Học thiết kế website</p>
<dl>
  <dt>Html</dt>
  <dd>Html là chữ viết tắt của cụm từ HyperText Markup Language</dd>
  
  <dt>Css</dt>
  <dd>CSS là chữ viết tắt của cụm từ tiếng anh (Cascading Style Sheet)</dd>
  
  <dt>Javascript</dt>
  <dd>Javascript là một ngôn ngữ lập trình được tạo ra vào năm 1995 bởi Brendan Eich tại Netscape</dd>
</dl>

Demo:

See the Pen WrXyOV by BlogIT.vn on CodePen.

Ngoài ra chúng ta còn có kiểu viết danh sách lồng nhau:

See the Pen eJeKjg by BlogIT.vn on CodePen.

Lời kết

Phần này hơi ngắn vì thật ra nó cũng chỉ có thể thôi, bạn viết được các kiểu cơ bản như thế cũng đã ổn rồi. Nếu viết nhớ các thẻ hết rồi thì cùng sang bài kế tiếp nhé.