Thẻ UL trong HTML

Trần Thị Vân
2708
21/02/2025

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, chi tiết như nào hãy cùng chúng tôi phân tích:

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>

Chạy Thử

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>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ <ul> trong HTML.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Trần Thị Vân

Trần Thị Vân là Content Creator tại Web Mới, phụ trách nghiên cứu, biên soạn nội dung và chia sẻ kiến thức về website, SEO, lập trình cùng các xu hướng công nghệ

Chia sẻ nội dung đánh giá của bạn về Thẻ UL trong HTML
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn