Thẻ ol trong HTML

Bùi Tấn Lực
1128
29/09/2025

Chức năng của Thẻ ol trong HTML

Thẻ ol trong HTML dùng để hiện một danh sách với các con số, con chữ làm số thứ tự ở đầu thẻ li, áp dụng cho các danh sách cần đánh số thứ tự.

Code Thẻ ol trong HTML

Thẻ ol mặc định trong HTML

<!--Mặc định sử dụng css list-style-type là decimal-->
<ol>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>
<!--Chọn con số bắt đầu-->
<ol start="21">
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

Chạy Thử

Css list-style-type khác cho thẻ ol trong HTML

<!DOCTYPE html>
<html>
<head>
<title>Css list-style-type khác cho thẻ ol trong HTML</title>
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
</head>
<body>
<h1>Css list-style-type khác cho thẻ ol trong HTML</h1>
<ol class="a">
  <li>Armenian type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="b">
  <li>Cjk-ideographic type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="c">
  <li>Decimal type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="d">
  <li>Decimal-leading-zero type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="e">
  <li>Georgian type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="f">
  <li>Hebrew type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="g">
  <li>Hiragana type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="h">
  <li>Hiragana-iroha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="i">
  <li>Katakana type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="j">
  <li>Katakana-iroha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="k">
  <li>Lower-alpha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="l">
  <li>Lower-greek type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="m">
  <li>Lower-latin type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="n">
  <li>Lower-roman type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="o">
  <li>Upper-alpha type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="p">
  <li>Upper-latin type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="q">
  <li>Upper-roman type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="r">
  <li>None type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

<ol class="s">
  <li>inherit type</li>
  <li>Sữa</li>
  <li>Đường</li>
  <li>Muối</li>
</ol>

</body>
</html>

Chạy Thử

Khi nào nên dùng thẻ ol thay vì ul?

Trường hợp nên sử dụng thẻ ol

Thẻ ol phù hợp khi các mục trong danh sách cần được thể hiện theo một trình tự nhất định. Thứ tự của từng mục có ý nghĩa và không nên thay đổi nếu muốn đảm bảo nội dung chính xác.

Một số trường hợp nên sử dụng thẻ ol:

Hướng dẫn các bước thực hiện theo trình tự.
Quy trình làm việc hoặc quy trình xử lý.
Xếp hạng, bảng thứ tự hoặc danh sách ưu tiên.
Danh sách các bước cài đặt, cấu hình hoặc đăng ký.
Những nội dung mà việc thay đổi vị trí các mục sẽ làm thay đổi ý nghĩa.

Ví dụ:

<ol>
    <li>Chuẩn bị dữ liệu</li>
    <li>Viết mã nguồn</li>
    <li>Kiểm tra kết quả</li>
    <li>Triển khai dự án</li>
</ol>

Trường hợp không nên sử dụng thẻ ol

Nếu các mục chỉ mang tính liệt kê và không phụ thuộc vào vị trí xuất hiện thì không nên sử dụng thẻ ol. Trong những trường hợp này, thẻ ul sẽ giúp nội dung tự nhiên và dễ theo dõi hơn.

Những trường hợp không nên dùng thẻ ol:

Danh sách tính năng của sản phẩm.
Menu điều hướng trên website.
Danh mục dịch vụ hoặc chuyên mục.
Liệt kê các công nghệ, ngôn ngữ lập trình hoặc công cụ.
Danh sách liên kết tham khảo.

So sánh thẻ ol và ul

Tiêu chí	ol	ul
Hiển thị	Danh sách có đánh số hoặc ký hiệu thứ tự.	Danh sách sử dụng dấu đầu dòng.
Ý nghĩa	Thứ tự các mục có giá trị.	Các mục có thể thay đổi vị trí mà không ảnh hưởng đến nội dung.
Ứng dụng	Quy trình, hướng dẫn, xếp hạng.	Danh mục, tính năng, liên kết, menu.

Việc lựa chọn đúng giữa ol và ul không chỉ giúp nội dung rõ ràng hơn mà còn tăng khả năng đọc hiểu cho người dùng và hỗ trợ các công cụ tìm kiếm hiểu đúng cấu trúc thông tin trên trang.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ ol trong HTML.

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thẻ ol 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

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !