Thẻ UL trong HTML
Trần Thị Vân - 2763
- 21/02/2025
Chức năng của Thẻ UL trong HTML
Thẻ ul trong HTML dùng để hiển thị một danh sách thông tin theo một cấp hoặc nhiều cấp, có thể hiển thị theo chiều dọc hoặc chiều ngang, giúp website hiển thị danh sách sản phẩm thật logic theo cấp bật để cho người dùng dễ hiểu, dễ tìm sản phẩm.
Các cấp bật của Thẻ ul trong HTML
ul một cấp:
<ul>
<li><a>Danh mục cấp một 1</a></li>
<li><a>Danh mục cấp một 2</a></li>
<li><a>Danh mục cấp một 3</a></li>
<li><a>Danh mục cấp một 4</a></li>
<li><a>Danh mục cấp một 5</a></li>
</ul>
ul hai cấp:
<ul>
<li><a>Danh mục cấp một 1</a>
<ul>
<li><a>Danh mục cấp hai 1</a></li>
<li><a>Danh mục cấp hai 2</a></li>
<li><a>Danh mục cấp hai 3</a></li>
<li><a>Danh mục cấp hai 4</a></li>
</ul>
</li>
<li><a>Danh mục cấp một 2</a></li>
<li><a>Danh mục cấp một 3</a></li>
<li><a>Danh mục cấp một 4</a></li>
<li><a>Danh mục cấp một 5</a></li>
</ul>
ul ba cấp:
<ul>
<li><a>Danh mục cấp một 1</a>
<ul>
<li><a>Danh mục cấp hai 1</a>
<ul>
<li><a>Danh mục cấp ba 1</a></li>
<li><a>Danh mục cấp ba 2</a></li>
<li><a>Danh mục cấp ba 3</a></li>
<li><a>Danh mục cấp ba 4</a></li>
</ul>
</li>
<li><a>Danh mục cấp hai 2</a></li>
<li><a>Danh mục cấp hai 3</a></li>
<li><a>Danh mục cấp hai 4</a></li>
</ul>
</li>
<li><a>Danh mục cấp một 2</a></li>
<li><a>Danh mục cấp một 3</a></li>
<li><a>Danh mục cấp một 4</a></li>
<li><a>Danh mục cấp một 5</a></li>
</ul>
CSS Thẻ ul trong HTML
CSS biểu tượng thẻ ul
<ul style="list-style-type:circle">
<li><a>Danh mục cấp một 1</a></li>
<li><a>Danh mục cấp một 2</a></li>
<li><a>Danh mục cấp một 3</a></li>
<li><a>Danh mục cấp một 4</a></li>
<li><a>Danh mục cấp một 5</a></li>
</ul>
<ul style="list-style-type:disc">
<li><a>Danh mục cấp một 1</a></li>
<li><a>Danh mục cấp một 2</a></li>
<li><a>Danh mục cấp một 3</a></li>
<li><a>Danh mục cấp một 4</a></li>
<li><a>Danh mục cấp một 5</a></li>
</ul>
<ul style="list-style-type:square">
<li><a>Danh mục cấp một 1</a></li>
<li><a>Danh mục cấp một 2</a></li>
<li><a>Danh mục cấp một 3</a></li>
<li><a>Danh mục cấp một 4</a></li>
<li><a>Danh mục cấp một 5</a></li>
</ul>
CSS ul không có biểu tượng ở đầu
<!DOCTYPE html>
<html>
<head>
<title>Chạy Thử CSS UL không có dấu chấm ở đầu</title>
<style>
ul{margin:0px;padding:0px}
ul li{margin:0px;padding:0px;list-style:none;}
</style>
</head>
<body>
<h1>Chạy Thử CSS UL không có dấu chấm ở đầu</h1>
<ul>
<li><a>Danh mục cấp một 1</a></li>
<li><a>Danh mục cấp một 2</a></li>
<li><a>Danh mục cấp một 3</a></li>
<li><a>Danh mục cấp một 4</a></li>
<li><a>Danh mục cấp một 5</a></li>
</ul>
</body>
</html>
Những trường hợp nên sử dụng thẻ ul trong HTML
Thẻ ul phù hợp khi nội dung cần được trình bày dưới dạng danh sách nhưng các mục không có thứ tự ưu tiên hoặc trình tự bắt buộc. Việc lựa chọn đúng thẻ ul giúp cấu trúc trang web rõ ràng hơn, đồng thời hỗ trợ trình duyệt và công cụ tìm kiếm hiểu được mối liên hệ giữa các nội dung.
Hiển thị danh sách thông tin không cần sắp xếp thứ tự
Khi các mục trong danh sách có vai trò tương đương nhau, thẻ ul là lựa chọn phù hợp thay vì sử dụng danh sách có đánh số. Một số trường hợp thường gặp như liệt kê tính năng sản phẩm, các dịch vụ cung cấp, ưu điểm nổi bật hoặc những nội dung liên quan.
Mỗi mục trong danh sách được đặt bên trong thẻ li, giúp nội dung dễ theo dõi hơn và thuận tiện khi cần chỉnh sửa hoặc mở rộng sau này.
<ul>
<li>Thiết kế giao diện thân thiện</li>
<li>Tốc độ tải trang nhanh</li>
<li>Hỗ trợ trên nhiều thiết bị</li>
</ul>
Xây dựng bố cục nội dung dễ đọc cho người dùng
Thẻ ul giúp chia nhỏ những đoạn thông tin dài thành các ý riêng biệt, từ đó cải thiện khả năng tiếp nhận nội dung. Người đọc có thể nhanh chóng nắm được các điểm chính mà không cần xem qua nhiều đoạn văn liên tục.
Trong các bài viết hướng dẫn, trang giới thiệu hoặc trang sản phẩm, việc sử dụng danh sách hợp lý còn giúp bố cục trang trở nên cân đối và chuyên nghiệp hơn.
Kết hợp thẻ ul với các thành phần HTML khác để tăng tính linh hoạt
Thẻ ul có thể kết hợp với nhiều thành phần HTML khác như liên kết a, hình ảnh img hoặc các nhóm nội dung riêng để tạo ra những khu vực hiển thị đa dạng trên website.
Ví dụ, một danh sách liên kết sử dụng ul và li có thể tạo thành khu vực tài nguyên, danh mục bài viết hoặc nhóm điều hướng phụ. Cách tổ chức này giúp mã HTML có tính logic thay vì chỉ tập trung vào phần hiển thị.
<ul>
<li>
<a href="#">Hướng dẫn HTML cơ bản</a>
</li>
<li>
<a href="#">Kiến thức CSS cần biết</a>
</li>
</ul>
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ ul trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
