💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Danh sách có thứ tự | Hướng dẫn và bài tập

📌

Kết luận

Có thể tạo danh sách có thứ tự bằng <ol> và <li>

Đối với các nội dung cần theo thứ tự như các bước thực hiện hoặc bảng xếp hạng, chúng ta sử dụng thẻ <ol>.
📝 Mã thực tế tại đây
<ol>
  <li>Cắt nguyên liệu</li>
  <li>Cho vào nồi</li>
  <li>Nấu chín</li>
</ol>
Các con số sẽ được tự động thêm vào, vì vậy bạn không cần phải tự viết "1. 2. 3.".

Sự khác biệt giữa ol và ul

ThẻTên gọiHiển thịCách dùng
<ol>Danh sách có thứ tự1. 2. 3.Các bước, bảng xếp hạng
<ul>Danh sách không thứ tự• • •Liệt kê các mục
Nếu bạn phân vân, hãy thử nghĩ: "Nếu thay đổi thứ tự các mục thì ý nghĩa có bị thay đổi không?". Nếu không sao thì dùng <ul>, nếu thứ tự là quan trọng thì dùng <ol>.

Tổng kết

- Tạo danh sách có thứ tự bằng cặp thẻ <ol> + <li> - Dùng <ol> khi thứ tự của các mục là quan trọng - Số thứ tự sẽ được trình duyệt tự động hiển thị

Hãy thử trong phần bài tập

Hãy thử viết 3 bước thực hiện một công việc hoặc một bảng xếp hạng yêu thích của bạn nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Sử dụng thẻ ol và li để viết 3 bước thực hiện một công việc hoặc bảng xếp hạng (ví dụ: Các bước nấu ăn, Top phim hay, v.v.).

Gợi ý khi gặp khó khăn

ol là viết tắt của ordered list (danh sách có thứ tự).

15pt

Danh sách có thứ tự

Sử dụng thẻ ol và li để viết 3 bước thực hiện một công việc hoặc bảng xếp hạng (ví dụ: Các bước nấu ăn, Top phim hay, v.v.).

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Danh sách có thứ tự" là bài HTML mức 入門. Sử dụng thẻ ol và li để viết 3 bước thực hiện một công việc hoặc bảng xếp hạng (ví dụ: Các bước nấu ăn, Top phim hay, v.v.). Chạy ngay trên trình duyệt với kiểm tra tự động.

Thẻ ol sẽ tự động đánh số thứ tự. Phù hợp cho việc trình bày các bước thực hiện hoặc danh sách xếp hạng. Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình html-basic. Bài #7 củng cố kỹ năng html-basic.

Quy trình từng bước

  1. Đọc bài giải thích và nắm mục tiêu "Danh sách có thứ tự"
  2. Kiểm tra cột HTML và bắt đầu từ mã mẫu
  3. Mở gợi ý nếu bí, so sánh với lời giải
  4. Bấm Chạy để xem preview/console
  5. Hệ thống kiểm tra có chứa: <ol>, <li>.
  6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

Mã giải dùng thẻ: ol, li. Kiểm tra thẻ đóng và lồng nhau. Giải thích: Thẻ ol sẽ tự động đánh số thứ tự. Phù hợp cho việc trình bày các bước thực hiện hoặc danh sách xếp hạng. Gợi ý: ol là viết tắt của ordered list (danh sách có thứ tự).

Ứng dụng thực tế & nghề nghiệp

HTML nền tảng cho blog, mô tả sản phẩm, site doanh nghiệp. Cấu trúc heading và semantic markup hỗ trợ SEO.

Lỗi thường gặp

  • Bỏ qua gợi ý: ol là viết tắt của ordered list (danh sách có thứ tự).
  • Nhiều h1 trên một trang
  • Quên thẻ đóng </p>
  • Phần tử không phải li ngay dưới ul
  • Bỏ alt trên img

Xử lý sự cố

Preview không đổi sau khi chạy
Kiểm tra bạn sửa đúng cột HTML và đã bấm Chạy.
Đúng nhưng không pass
Hệ thống kiểm tra có chứa: <ol>, <li>. Kiểm tra typo và thẻ đóng.
Lỗi trên console
Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại
Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

  • Giải thích kỹ thuật trong "Danh sách có thứ tự" bằng lời của bạn trong 30 giây
  • Luyện mô tả từng dòng mã giải trên bảng trắng
  • Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

h1
Heading cấp cao nhất—nên một trang một h1.
p
Thẻ đoạn văn.
a
Liên kết với thuộc tính href.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Danh sách có thứ tự cho từ khóa: Danh sách có thứ tự, html-basic, 入門, ol, li, ordered list.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Danh sách có thứ tự có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Danh sách có thứ tự" ở mức "入門". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Danh sách có thứ tự"?

Thẻ ol sẽ tự động đánh số thứ tự. Phù hợp cho việc trình bày các bước thực hiện hoặc danh sách xếp hạng. Gợi ý: ol là viết tắt của ordered list (danh sách có thứ tự).

Vị trí danh mục html-basic?

HTML nền tảng cho blog, mô tả sản phẩm, site doanh nghiệp. Cấu trúc heading và semantic markup hỗ trợ SEO.

Các bước cụ thể cho "Danh sách có thứ tự"?

1. Đọc bài giải thích và nắm mục tiêu "Danh sách có thứ tự"
2. Kiểm tra cột HTML và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa:
    ,
  1. .
    6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

Mã giải dùng thẻ: ol, li. Kiểm tra thẻ đóng và lồng nhau.

Giải thích: Thẻ ol sẽ tự động đánh số thứ tự. Phù hợp cho việc trình bày các bước thực hiện hoặc danh sách xếp hạng.

Gợi ý: ol là viết tắt của ordered list (danh sách có thứ tự).

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột HTML và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa:
    ,
  1. . Kiểm tra typo và thẻ đóng.
    Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
    Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Danh sách có thứ tự" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

🛠️ Công cụ đề xuất

Nén ảnh & WebP

Làm nhẹ hình ảnh an toàn với xử lý local. Tăng tốc độ web tối đa.

Dùng thử →

Định dạng & Kiểm tra JSON

Định dạng JSON dễ đọc trong tích tắc. Kiểm tra lỗi cú pháp nhanh chóng.

Dùng thử →

Giải mã & Xác minh JWT

Phân tích nội dung token an toàn. Kiểm tra thời hạn và các xác nhận.

Dùng thử →