Tìm hiểu Thẻ UL trong HTML, đó là một loại thẻ HTML dùng để hiển thị một danh sách thông tin theo 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:

Thẻ UL trong HTML

Thẻ <ul> trong HTML là gì?

Thẻ <ul> trong HTML là một loại thẻ 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ó dấu chấm ở đầu

<!DOCTYPE html>
<html>
<head>
<title>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>
<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

Ngọc Thanh

Ngọc Thanh là người viết content có kinh nghiệm nhiều năm tại Web Mới, chuyên viết content bên lĩnh vực website và nhiều lĩnh vực khác

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 miễn phí

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