Giới thiệu

Phần tử danh sách (list) được sử dụng rất thường xuyên trong một tài liệu web bằng HTML. Trong một trang web thường người ta sử dụng các phần tử danh sách rất nhiều, chẳng hạn như menu, danh sách những thông tin nào đó,…v…v…đều được tạo ra bởi các thẻ tạo danh sách trong HTML.

Trong HTML có ba kiểu danh sách (list type) đó là kiểu xếp theo thứ tự (ordered list), kiểu không xếp thứ tự (unordered list). Cụ thể:

• Kiểu xếp theo thứ tự (Ordered List): Là kiểu hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự bằng số hoặc chữ cái.
• Kiểu không xếp thứ tự (Unordered List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng.

Dưới đây là ví dụ:

Danh sách không xếp thứ tự

Ta định nghĩa danh sách không xếp thứ tự bằng thẻ <ul>, viết tắt của unordered list. Mỗi phần tử của danh sách được định nghĩa bằng thẻ  <li> , viết tắt của list item.

Mặc định, các phần tử của danh sách sẽ được hiển thị kèm theo một dấu tròn phía trước:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Kết quả:

Các biểu tượng cho phần tử trong danh sách không xếp thứ tự

Ta dùng thuộc tính CSS list-style-type để định kiểu cho biểu tượng của phần tử trong danh sách:

Giá trị	Miêu tả
disc	(Mặc định) Các biểu tượng là hình tròn màu đen
circle	Các biểu tượng là hình tròn rỗng
square	Các biểu tượng là hình vuông
none	Không hiển thị các biểu tượng

Ví dụ dùng giá trị disc:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Kết quả:

Ví dụ dùng giá trị circle:

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Kết quả:

Ví dụ dùng giá trị square:

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Kết quả:

Ví dụ dùng giá trị none:

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Kết quả:

Danh sách xếp theo thứ tự

Ta định nghĩa một danh sách xếp theo thứ tự bằng thẻ <ol> (ordered list). Mỗi phần tử của danh sách được định nghĩa bằng thẻ <li> (list item).

Mặc định thì các phần tử sẽ được hiển thị kèm số thứ tự:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Kết quả:

Thuộc tính type của danh sách xếp thứ tự

Thuộc tính type của thẻ <ol>  dùng để định kiểu cho biểu tượng các phần tử:

Type	Miêu tả
type=”1″	Các phần tử sẽ được đánh thứ tự bằng số (Mặc định)
type=”A”	Các phần tử sẽ được đánh thứ tự bằng chữ cái hoa
type=”a”	Các phần tử sẽ được đánh thứ tự bằng chữ cái thường
type=”I”	Các phần tử sẽ được đánh thứ tự bằng chữ số La Mã hoa
type=”i”	Các phần tử sẽ được đánh thứ tự bằng chữ số La Mã thường

Ví dụ đánh thứ tự bằng số: type=”1″:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Kết quả:

Ví dụ đánh thứ tự bằng chữ cái hoa: type=”A”:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Kết quả:

Ví dụ đánh thứ tự bằng chữ cái thường: type=”a”:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Kết quả:

Ví dụ đánh thứ tự bằng chữ số La Mã hoa: type=”I”:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Kết quả:

Ví dụ đánh thứ tự bằng chữ số La Mã hoa:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Kết quả:

Danh sách miêu tả

Mã HTML cũng có thẻ danh sách miêu tả.

Một danh sách miêu tả là danh sách các thuật ngữ cùng với miêu tả của chúng. 

Thẻ <dl> định nghĩa một danh sách miêu tả, trong đó, thẻ <dt> định nghĩa thuật ngữ (tên gọi), và thẻ  <dd> miêu tả các thuật ngữ:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

Kết quả:

Danh sách bên trong danh sách

Ta có thể lồng danh sách vào một danh sách khác, tạo thành danh sách bên trong danh sách, tiếng Anh gọi là nested list:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Kết quả:

Chú ý: Mỗi phần tử không chỉ có thể chứa danh sách khác mà còn có thể chứa các thành phần HTML khác như ảnh hay liên kết,…

Danh sách nằm ngang

Danh sách trong HTML có thể được định kiểu theo nhiều cách bằng CSS.

Một cách làm phổ biến là định kiểu chuyển danh sách thành nằm ngang để tạo thành một menu:

HTML:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}

Kết quả:

Tóm tắt

• Dùng thẻ <ul> để định nghĩa một danh sách không xếp thứ tự
• Dùng thuộc tính CSS list-style-type để định nghĩa biểu tượng cho các phần tử trong danh sách
• Dùng thẻ <ol> để định nghĩa một danh sách xếp thứ tự
• Dùng thuộc tính type để định nghĩa kiểu đánh thứ tự
• Dùng thẻ <li> để định nghĩa một phần tử  trong danh sách
• Dùng thẻ <dl> để định nghĩa một danh sách miêu tả
• Dùng thẻ <dt> để định nghĩa một thuật ngữ
• Dùng thẻ <dd> để miêu tả thuật ngữ ngay phía trên nó trong danh sách miêu tả
• Có thể lồng các danh sách bên trong các danh sách
• Các phần tử trong danh sách có thể chứa các thành phần HTML khác
• Dùng thuộc tính CSS float:left hoặc display:inline để hiển thị danh sách nằm ngang

Kết luận

Qua đây là một số chia sẻ về thẻ tạo danh sách ul, ol, li trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.

Các bạn có thể tham khảo các bài viết hay về HTML tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.