Thẻ caption trong HTML

• Bùi Tấn Lực
• 1302
• 26/09/2025

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

Thẻ caption trong HTML dùng trong thẻ table với mục đích làm chú thích hoặc tiêu đề của bảng để mô tả rõ hơn về nội dung của table, thẻ mặc định canh giữa chữ.

Cú pháp của Thẻ caption trong HTML

<caption>tenbang</caption>

tenbang: Tên bảng hoặc chú thích.

Code Thẻ caption trong HTML

<caption> Bảng Lương</caption>

<table>
 <caption> Bảng Lương</caption>
 <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan= "2">Tổng Lương</th>
      <td>85.000.000VNĐ</td>
    </tr>
  </tfoot>
</table>

Chạy Thử

Các lỗi thường gặp khi sử dụng thẻ caption trong HTML

Đặt caption không phải là phần tử đầu tiên của table

Trong cấu trúc HTML chuẩn, caption phải xuất hiện ngay sau thẻ mở của table. Đây là vị trí được quy định để trình duyệt và các công nghệ hỗ trợ nhận diện tiêu đề của bảng trước khi xử lý phần dữ liệu bên trong.

Nếu đặt caption phía sau các hàng dữ liệu hoặc các phần như thead hay tbody, mã HTML sẽ không còn đúng chuẩn. Một số trình duyệt có thể tự điều chỉnh, nhưng không nên phụ thuộc vào hành vi này vì dễ phát sinh lỗi hiển thị hoặc ảnh hưởng đến khả năng truy cập.

Ví dụ đúng:

<table>
    <caption>Bảng thống kê doanh thu</caption>
    <tr>
        <th>Tháng</th>
        <th>Doanh thu</th>
    </tr>
    <tr>
        <td>01</td>
        <td>120.000.000</td>
    </tr>
</table>

Nhầm lẫn giữa caption và figcaption

Hai phần tử này đều có nhiệm vụ mô tả nội dung nhưng được sử dụng cho những đối tượng hoàn toàn khác nhau. Caption chỉ áp dụng cho bảng dữ liệu, trong khi figcaption được dùng để chú thích hình ảnh, biểu đồ hoặc các nội dung nằm trong figure.

Việc sử dụng sai phần tử không chỉ làm giảm tính ngữ nghĩa của tài liệu HTML mà còn khiến các công cụ hỗ trợ và công cụ tìm kiếm hiểu sai cấu trúc nội dung. Hãy lựa chọn đúng phần tử theo đúng mục đích sử dụng để đảm bảo tài liệu rõ ràng và dễ bảo trì.

Lạm dụng caption để trang trí thay vì mô tả bảng

Caption nên đóng vai trò là tiêu đề mô tả nội dung của bảng thay vì một dòng chữ mang tính quảng cáo hoặc trang trí. Người đọc cần biết bảng đang thể hiện thông tin gì ngay khi nhìn vào caption mà không phải đọc toàn bộ dữ liệu.

Một caption chất lượng nên đáp ứng các tiêu chí sau:

• Phản ánh chính xác nội dung của bảng.
• Ngắn gọn, súc tích và dễ hiểu.
• Không nhồi nhét từ khóa hoặc thông tin không liên quan.
• Giúp người đọc xác định mục đích của bảng chỉ trong vài giây.

Ẩn caption bằng CSS làm giảm khả năng truy cập

Một số giao diện hiện đại muốn loại bỏ tiêu đề bảng khỏi màn hình nên lựa chọn ẩn caption bằng CSS. Nếu thực hiện không đúng cách, người dùng sử dụng trình đọc màn hình có thể không còn nhận được thông tin mô tả bảng, từ đó gây khó khăn khi tiếp cận dữ liệu.

Nếu thiết kế không yêu cầu hiển thị caption, nên áp dụng các kỹ thuật CSS phù hợp để giữ nguyên giá trị ngữ nghĩa của phần tử thay vì xóa hoàn toàn khỏi tài liệu HTML. Điều này giúp cân bằng giữa trải nghiệm giao diện và khả năng truy cập.

Trước khi hoàn thiện một bảng dữ liệu, hãy kiểm tra lại vị trí của caption, nội dung mô tả và mục đích sử dụng. Chỉ cần tuân thủ đúng những nguyên tắc cơ bản này, bảng sẽ đạt chuẩn HTML, dễ hiểu hơn với người dùng và thân thiện hơn với các công cụ tìm kiếm.

Lời kết

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

Bùi Tấn Lực

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

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn