ul li trong html: hướng dẫn sử dụng list

Giả sử bạn muốn tạo một danh sách các món ăn yêu thích trên trang web của mình. Bạn có thể sử dụng thẻ <ul> để tổ chức thông tin này. Mã HTML sẽ trông như sau:

<ul id="favorite-dishes" style="color: navy;">
  <li>Phở</li>
  <li>Bánh mì</li>
  <li>Gỏi cuốn</li>
</ul>

Trong ví dụ này, chúng tôi đã thêm các thuộc tính id và style vào thẻ <ul>, giúp tùy chỉnh danh sách và làm nổi bật nó trên trang bằng màu chữ navy.

Cách sử dụng thẻ <li> trong danh sách không có thứ tự

Để minh họa việc lồng các danh sách, giả sử bạn muốn thêm một danh sách các lựa chọn nhân vật cho một trò chơi. Danh sách này có thể được tổ chức như sau:

<ul>
  <li>Chiến binh
    <ul>
      <li>Kiếm sĩ</li>
      <li>Cung thủ</li>
    </ul>
  </li>
  <li>Pháp sư
    <ul>
      <li>Thầy phù thủy</li>
      <li>Nhà ảo thuật</li>
    </ul>
  </li>
</ul>

Ví dụ này cho thấy cách sử dụng thẻ <li> để lồng danh sách các lớp nhân vật bên trong danh sách nhân vật chính, giúp thông tin được sắp xếp gọn gàng và dễ theo dõi.

Làm đẹp cho danh sách với CSS

Để thay đổi kiểu dáng của bullet points trong danh sách, bạn có thể sử dụng CSS như sau:

ul.custom-list-style {
  list-style-type: square;
  color: green;
}

Và áp dụng CSS này vào HTML:

<ul class="custom-list-style">
  <li>Sữa</li>
  <li>Bánh mì</li>
  <li>Trứng</li>
</ul>

Trong ví dụ này, tất cả các mục danh sách không chỉ có dấu đầu dòng hình vuông mà còn được tô màu xanh, làm cho danh sách trở nên bắt mắt hơn.

Ví dụ Tạo danh sách với <ul> và <li>

Một ví dụ khác về việc sử dụng thẻ <ul> và <li> là tạo danh sách các nhiệm vụ hàng ngày:

<ul>
  <li>Check email</li>
  <li>Viết báo cáo</li>
  <li>Gọi điện cho khách hàng</li>
</ul>

Danh sách này có thể dễ dàng được tích hợp vào một trang web cá nhân hoặc dashboard công việc, giúp người dùng theo dõi và hoàn thành các nhiệm vụ quan trọng trong ngày.

Kết luận

Thẻ <ul> và <li> là những phần cơ bản nhưng cực kỳ quan trọng trong việc tạo cấu trúc cho các trang web. Bằng cách sử dụng chúng một cách hiệu quả và tùy chỉnh với CSS, bạn có thể cải thiện đáng kể trải nghiệm người dùng trên trang của mình. Hãy thực hành thêm để trở nên thành thạo hơn!