Thẻ ul li và ol li là một trong những thẻ HTML cơ bản, thường xuyên được dùng. Hôm nay Kiến càng sẽ hướng dẫn bạn cách sử dụng chúng.
#1. Danh sách dùng để làm gì?
Danh sách là những thứ mà có liên quan mật thiết với nhau do có đặc điểm chung nào đó, chẳng hạn danh sách học sinh trong một lớp, danh sách các công ty giàu nhất thế giới, danh sách các loại thực phẩm tốt cho trí não…
Khi bạn sử dụng thẻ danh sách, nghĩa là bạn thông báo cho người đọc cũng như các công cụ tìm kiếm biết sự liên quan của các phần tử nằm trong danh sách.
#2. Sự khác nhau giữa ul và ol
Các danh sách không có thứ tự kiểu như thế này:
Được tạo thành từ các thẻ ul và li
—
Còn danh sách được đánh thứ tự kiểu như thế này:
- Toán
- Lý
- Hóa
Được tạo thành từ các thẻ ol và li.
#3. Code mẫu
Code mẫu cho danh sách không có thứ tự ul li ở trên:
<ul>
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>Còn dưới đây là của danh sách có thứ tự ol li:
<ol>
<li>Toán</li>
<li>Lý</li>
<li>Hóa</li>
</ol>Nhìn cả 2 danh sách chúng ta có thể thấy, danh sách có thứ tự và không có thứ tự đều cần đến thẻ <li></li> nằm giữa.
Giải thích từ viết tắt: ul là viết tắt của từ tiếng Anh unordered list (nghĩa là không có thứ tự), li là viết tắt của list (danh sách), còn ol là viết tắt của ordered list (nghĩa là có thứ tự).
Để điều chỉnh style cho danh sách bạn dùng CSS. Một bộ phận trên web có thể bạn không để ý, đó là menu thường được viết bằng thẻ các thẻ ul và li để thể hiện sự liên quan với nhau.
#4. Thay đổi Style của thẻ li
Thẻ li theo mặc định nếu ở trong thẻ ul sẽ có style kiểu chấm tròn đậm, còn nếu trong thẻ ol sẽ có style kiểu số như 1, 2, 3,…CSS cho phép chúng ta tùy biến style này qua thuộc tính list-style-type. Sau đây là một số ví dụ:
1. Style chấm tròn nhạt
Code mẫu – bạn chú ý cái list-style-type:
<ul style="list-style-type: circle;">
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>2. Style hình vuông đậm
<ul style="list-style-type: square;">
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>Dĩ nhiên là bạn phải để style cho ul trong file CSS riêng chứ không viết trực tiếp vào trong thẻ HTML như trên, tôi viết ra thế cho dễ quan sát và minh họa thôi.
Nếu muốn hủy bỏ style – tức là không chấm tròn, chấm vuông hay số má gì hết thì bạn để list-style-type: none; thường thì chúng ta chỉ sử dụng giá trị none khi làm menu bằng ul và li.
Có bạn hỏi thế các list-style mặc định có tên là gì, tôi xin nói luôn:
- Style kiểu chấm tròn của ul là list-style-type: disc
- Còn style kiểu số của ol là list-style-type: decimal
Vì nó là style mặc định rồi (các trình duyệt thiết lập sẵn) nên bạn không cần viết CSS thì nó vẫn hiện chấm tròn và số tương ứng.
3. Style là ảnh
Cái này phải nói là rất hay, bạn có thể không thích mấy cái chấm tròn, chấm vuông, số, ký tự…mà lại thích danh sách được đánh dấu bằng ảnh của riêng bạn, nó làm cho trang web trở nên cá tính hơn, chúng ta điều chỉnh điều này thông qua thuộc tính list-style-image, tôi thí dụ luôn:
- Táo
- Mận
- Đào
Code mẫu:
<ul style="list-style-image: url('https://kiencang.net/wp-content/uploads/2021/02/bullet-yellow.png');">
<li>Táo</li>
<li>Mận</li>
<li>Đào</li>
</ul>Trong URL chính là đường dẫn của ảnh mà bạn muốn nó làm bullet. Nếu muốn bạn có thể tự vẽ ra bullet bằng công cụ đồ họa nào đó, hoặc cách nhanh hơn là lên trang IconFinder tìm với từ khóa bullet rồi chọn cho mình một chú mang về – rất tiện mà cũng đẹp nữa.
4. Điều chỉnh vị trí của thẻ danh sách
Để điều chỉnh vị trí của danh sách chúng ta dùng thuộc tính list-style-position, thuộc tính này có 2 giá trị inside và outside, trong đó outside là giá trị mặc định. Dưới đây là các ví dụ để bạn thấy sự khác nhau giữa chúng:
A. inside
ul {
list-style-position:inside;
}- Một
- Hai
- Ba
B. outside
ul {
list-style-position:outside;
}- Một
- Hai
- Ba
#5. Bonus
Nếu bạn quan tâm đến việc trình bày danh sách sao cho hiệu quả, thu hút người dùng thì bài này nên đọc.
Cuối cùng tôi tặng bạn danh sách 10 quốc gia đông dân nhất thế giới xếp theo thứ tự giảm dần và được tạo bằng thẻ ol và li:
- CHND Trung Hoa
- Ấn Độ
- Hoa Kỳ
- Indonesia
- Brazil
- Pakistan
- Nigeria
- Bangladesh
- Liên Bang Nga
- Nhật Bản
Thông tin 10 quốc gia này được tham khảo từ Wikipedia Việt Nam – cũng theo đó Việt Nam đứng vị trí số 14 về dân số, mà khổ nỗi diện tích nước mình bé đâm ra giá bất động sản lên cao quá (chẳng liên quan gì tới ul và li nhỉ :))