Cafedev chia sẻ cho ace về List trong HTML cho phép các developer web nhóm một nhóm các mục liên quan trong danh sách.

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h2>List Không có số thứ tự</h2>

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

<h2>List có số thứ tự</h2>

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

</body>
</html>

Copy and chạy code

1. Danh sách trong HTML không có số thứ tự

Một danh sách không có thứ tự bắt đầu bằng thẻ <ul> . Mỗi mục danh sách bắt đầu bằng thẻ <li>

Các mục danh sách sẽ được đánh dấu bằng đạn (vòng tròn nhỏ màu đen) theo mặc định:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<!DOCTYPE html>
<html>
<body>

<h2>Danh sách HTML không có số thứ tự</h2>

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

</body>
</html>

2. Danh sách trong HTML có số thứ tự

Danh sách được sắp xếp bắt đầu bằng thẻ <ol>. Mỗi mục danh sách bắt đầu bằng thẻ <li>

Các mục danh sách sẽ được đánh dấu bằng số theo mặc định:

<!DOCTYPE html>
<html>
<body>

<h2>List có số thứ tự</h2>

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

</body>
</html>

2. Danh sách trong HTML với mô tả

HTML cũng hỗ trợ danh sách với mô tả.

Một danh sách mô tả là một danh sách các item, với một mô tả của từng item.

Thẻ <dl> xác định danh sách mô tả, thẻ <dt> xác định thuật ngữ (tên) và thẻ <dd> mô tả từng thuật ngữ:

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

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

</body>
</html>

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!