Thẻ ul, ol, li trong HTML

Để tạo danh sách trong HTML bạn sẽ dùng các thẻ như UL, OL, LI. Tuy nhiên khi dùng lại có một vài vấn đề liên quan như trước thẻ li có dấu chấm làm sao để loại bỏ? Bài viết sau đây bạn sẽ hiểu rõ hơn về cách dùng của các thẻ này.

Danh sách HTML (HTML List) có dạng như hình dưới

Danh sách HTML không theo thứ tự với thẻ UL

Nếu bạn muốn show một list nào đó không theo thứ tự nhất định thì dùng thẻ <ul></ul>. Bên trong nó chứa thẻ <li></li>

<ul>
  <li>Học PHP</li>
  <li>Học CSS</li>
  <li>Học HTML5</li>
</ul>

Danh sách HTML có thứ tự với thẻ OL

Để hiển thị một danh sách có thứ tự từ 1 cho tới 10 vv… thì bạn dùng thẻ ol.

<ol>
  <li>PHP Learn</li>
  <li>CSS3 Learn</li>
  <li>HTML5 Learn</li>
</ol>

Thẻ LI trong HTML

Thuộc tính ký tự này cho biết kiểu đánh số:

a: chữ viết thường
A: chữ in hoa
i: chữ số La mã viết thường
I: chữ số La mã viết hoa
1: số

Ví dụ:

<ol type="I">
    <li value="3">List 1</li>
    <li>List 2</li>
    <li>List 3</li>
</ol>

Bỏ dấu chấm thẻ li

Để bỏ chấm thẻ li bạn dùng mã CSS sau:

ul li {
list-style-type: none;
}

Nhưng bạn cần lưu ý rằng khi đưa vào website nếu dùng y chang như trên nó sẽ ảnh hưởng toàn bộ thẻ li. Để ảnh hưởng tới một thẻ li ở vị trí mà bạn muốn bỏ thì thêm Class ở trong ul.

<ul class="menuList">
  <li>PHP Learn</li>
  <li>CSS3 Learn</li>
  <li>HTML5 Learn</li>
</ul>

Và mã CSS:

.menuList li { 
list-style-type: none; 
}

Thẻ li kiểu hình tròn, vuông

Nếu muốn hiển thị kiểu tròn bạn dùng mã CSS

li { 
list-style-type: circle; 
}

Còn hình vuông

li {
list-style-type: square;
}

Vậy là qua bài học này bạn đã biết được thẻ ul, ol và li về cách sử dụng như thế nào rồi đấy. Chúc bạn học tập thật tốt và đừng quên ghé thăm quachquynh.com để đón đọc nhiều bài viết hay về HTML.