Danh sách trong HTML

Bá Điền

Bài viết hướng dẫn cách tạo danh sách trong HTML.

Danh sách kiểu sắp xếp trong HTML

Danh sách không theo thứ tự bắt đầu bằng thẻ <ul>, mỗi mục sẽ bắt đầu bằng thẻ <li>. Mặc định trước mỗi mục là hình thoi.

<ul>
  <li>Trà</li>
  <li>Nước</li>
  <li>Cà phê</li>
</ul>

Chọn kí tự đánh dấu đầu dòng danh sách không sắp xếp

Đặc tính CSS list-style-type được dùng để định nghĩa kí tự đầu dòng.

disc - hình thoi (mặc định)
circle - hình tròn
square - hình vuông
none - không dùng kí tự nào

<ul style="list-style-type:disc">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ul>

<ul style="list-style-type:circle">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ul>

<ul style="list-style-type:square">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ul>

<ul style="list-style-type:none">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ul>

Danh sách kiểu sắp xếp trong HTML

Danh sách kiểu này bắt đầu bằng thẻ <ol>, mỗi mục trong danh sách bắt đầu bằng thẻ <li>, mặc định dánh dấu mỗi mục bằng số thứ tự.

<ol>
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ol>

Chọn kí tự đánh dấu đầu dòng danh sách sắp xếp

Thuộc tính type của thẻ <ol> định nghĩa kiểu kí tự được dùng để đánh dấu đầu dòng.

type=”1” số thứ tự (mặc định)
type=”A” chữ cái viết hoa
type=”a” chữ cái viết thường
type=”I” số la mã viết hoa
type=”i” số la mã viết thường

<ol type="1">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ol>

<ol type="A">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ol>

<ol type="a">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ol>

<ol type="I">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ol>

<ol type="i">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ol>

Danh sách kiểu mô tả trong HTML

Đây là danh sách các thuật ngữ với mô tả cho từng thuật ngữ. Thẻ <dl> dùng để định nghĩa danh sách mô tả, thẻ <dt> định nghĩa thuật ngữ (tên) và thẻ <dd> dùng để mô tả.

<dl>
 <dt>Cà phê</dt>
 <dd>- thức uống màu đen</dd>
 <dt>Sữa</dt>
 <dd>- thức uống màu trắng</dd>
</dl>

Danh sách HTML lồng vào nhau

Danh sách trong HTML có thể lồng vào nhau (danh sách lồng bên trong danh sách)

<ul>
 <li>Cà phê</li>
 <li>Trà
  <ul>
   <li>Trà xanh</li>
   <li>Trà nhài</li>
  </ul>
 </li>
 <li>Sữa</li>
</ul>

Lưu ý: các mục trong danh sách có thể chứa danh sách hay các phần tử HTML khác như hình ảnh, đường dẫn…

Kiểm soát việc đếm số trong danh sách

Mặc định, danh sách kiểu sắp xếp sẽ bắt đầu đếm từ 1. Nếu muốn đếm từ 1 số khác, bạn dùng thuộc tính start.

<ol start="50">
 <li>Trà</li>
 <li>Nước</li>
 <li>Cà phê</li>
</ol>

Tạo danh sách ngang với CSS

Danh sách HTML có thể tạo theo nhiều kiểu, cách phổ biến là làm theo chiều ngang để tạo menu điều hướng.

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<ul>
 <li><a href="#home">Trang chủ</a></li>
 <li><a href="#news">Tin tức</a></li>
 <li><a href="#contact">Danh bạ</a></li>
 <li><a href="#about">Về chúng tôi</a></li>
</ul>

</body>
</html>