Thẻ Figure trong HTML: Hướng Dẫn Toàn Diện & Ví Dụ

Bạn đang tìm cách trình bày hình ảnh và chú thích một cách chuyên nghiệp? Thẻ figure trong HTML chính là công cụ bạn cần. Nó không chỉ giúp nhóm nội dung liên quan lại với nhau mà còn mang lại ý nghĩa ngữ nghĩa quan trọng cho trang web. Trong bài viết này, Da I Kin sẽ cùng bạn tìm hiểu từ A-Z về cách sử dụng thẻ figure và figcaption qua các ví dụ thực tế dễ hiểu nhất.

Thẻ figure trong HTML là gì?

Hãy bắt đầu với câu hỏi cơ bản nhất: thẻ figure dùng để làm gì?

Nói một cách đơn giản, thẻ <figure> là một thẻ ngữ nghĩa (semantic tag) trong HTML5. Nó được dùng để bao bọc một khối nội dung độc lập, có liên quan đến văn bản chính nhưng có thể di chuyển ra chỗ khác mà không ảnh hưởng đến mạch đọc. Bạn có thể hình dung nó như một chiếc khung chứa dành riêng cho các yếu tố minh họa.

Nội dung bên trong thẻ <figure> thường là một đơn vị hoàn chỉnh. Nó giúp trình duyệt, công cụ tìm kiếm và các công nghệ hỗ trợ hiểu rằng tất cả các phần tử bên trong nó là một thể thống nhất.

Bạn có thể bất ngờ về sự đa dụng của thẻ này. Nó không chỉ dành cho hình ảnh. Dưới đây là một số trường hợp bạn nên sử dụng <figure>:

• Hình ảnh (images): Đây là cách dùng phổ biến nhất.
• Biểu đồ (charts/diagrams): Trình bày số liệu thống kê hoặc quy trình.
• Đoạn mã (code snippets): Hiển thị các ví dụ code lập trình.
• Trích dẫn (quotations): Bao bọc một câu trích dẫn nổi bật.
• Video hoặc Âm thanh (video/audio): Khi cần thêm chú thích hoặc ngữ cảnh.
• Thơ hoặc lời bài hát: Trình bày các tác phẩm nghệ thuật.

Thẻ figcaption – Thêm chú thích chuyên nghiệp

Một khi đã có chiếc khung <figure>, bạn sẽ cần một tấm nhãn tên để giải thích cho nó. Đó chính là lúc thẻ <figcaption> trong HTML tỏa sáng.

Figcaption là gì và chức năng của nó?

Thẻ <figcaption> được thiết kế đặc biệt để cung cấp chú thích hoặc mô tả cho nội dung bên trong thẻ <figure>. Nó là người bạn đồng hành không thể tách rời của <figure>. Chức năng chính của nó là tạo ra một liên kết ngữ nghĩa rõ ràng giữa nội dung (như ảnh, biểu đồ) và phần văn bản mô tả nó.

Sử dụng <figcaption> giúp các công cụ tìm kiếm và trình đọc màn hình hiểu rằng đoạn văn bản này chính là chú thích ảnh trong HTML (hoặc cho các nội dung khác), chứ không phải một đoạn văn bản ngẫu nhiên.

Làm thế nào để thêm chú thích cho hình ảnh trong HTML?

Cách làm cực kỳ đơn giản. Bạn chỉ cần đặt thẻ <figcaption> vào bên trong thẻ <figure>, ngay trước hoặc ngay sau phần tử mà nó mô tả. Thông thường, người ta hay đặt nó ở cuối cùng.

Ví dụ, để thêm chú thích cho một hình ảnh, bạn sẽ đặt thẻ <img> và thẻ <figcaption> cùng nằm trong một thẻ <figure>. Chúng ta sẽ xem ví dụ cụ thể ở phần dưới nhé.

Cú pháp và các ví dụ thực tế với thẻ figure

Lý thuyết là vậy, nhưng thực hành mới giúp bạn nhớ lâu. Hãy cùng Da I Kin xem qua cú pháp và các ví dụ thực tế nhé. Bạn sẽ thấy nó dễ hơn bạn nghĩ nhiều!

Cú pháp chuẩn kết hợp figure và figcaption

Cú pháp cơ bản rất gọn gàng. Bạn có một thẻ <figure> bao ngoài và bên trong là nội dung chính cùng với thẻ <figcaption> (tùy chọn).

<figure>
  <!-- Nội dung ở đây: có thể là <img>, <pre>, <blockquote>... -->
  <figcaption>Đây là dòng chú thích cho nội dung bên trên.</figcaption>
</figure>

Bây giờ, hãy áp dụng vào các tình huống cụ thể.

Ví dụ 1: Chú thích cho một hình ảnh duy nhất

Đây là ví dụ thẻ figure html5 kinh điển nhất. Bạn có một ảnh và một dòng mô tả đi kèm.

<figure>
  <img src="logo-wiweb.png" alt="Logo của Da I Kin Việt Nam">
  <figcaption>Hình 1: Logo chính thức của Da I Kin.</figcaption>
</figure>

Ví dụ 2: Chú thích cho nhiều hình ảnh trong một figure

Thẻ <figure> rất linh hoạt. Nó có thể chứa nhiều hình ảnh và chỉ cần một chú thích chung cho tất cả.

<figure>
  <img src="hinh-anh-1.jpg" alt="Mô tả ảnh 1" style="width:49%">
  <img src="hinh-anh-2.jpg" alt="Mô tả ảnh 2" style="width:49%">
  <figcaption>Hình 2: Hai hình ảnh minh họa cho cùng một chủ đề.</figcaption>
</figure>

Ví dụ 3: Sử dụng figure để bao bọc đoạn mã

Đây là một cách dùng sáng tạo và rất đúng về mặt ngữ nghĩa. Thay vì chỉ dùng thẻ <pre> và <code>, việc bọc chúng trong <figure> cho phép bạn thêm chú thích một cách chính thống.

<figure>
  <pre><code>
function helloWorld() {
  console.log("Chào mừng đến với Da I Kin!");
}
  </code></pre>
  <figcaption>Đoạn mã 1: Một hàm JavaScript đơn giản để in lời chào.</figcaption>
</figure>

Lợi ích quan trọng của việc sử dụng thẻ figure

Vậy tại sao chúng ta phải dùng <figure> thay vì các thẻ khác? Câu trả lời nằm ở hai lợi ích to lớn: ngữ nghĩa và tối ưu hóa.

Tăng cường ý nghĩa ngữ nghĩa cho nội dung

Đây chính là ý nghĩa thẻ figure quan trọng nhất. Khi bạn dùng <figure>, bạn đang nói với trình duyệt rằng: “Này, khối nội dung này và chú thích của nó là một thể thống nhất, có liên quan mật thiết với nhau”.

Việc sử dụng các html semantic tags như <figure>, <article>, <nav> giúp cấu trúc trang web của bạn rõ ràng hơn rất nhiều. Nó làm cho code của bạn không chỉ chạy được mà còn dễ đọc và dễ hiểu cho cả người và máy.

Cải thiện SEO và khả năng tiếp cận

Từ ý nghĩa ngữ nghĩa ở trên, chúng ta có được hai lợi ích thực tế:

• SEO (Tối ưu hóa công cụ tìm kiếm): Google và các công cụ tìm kiếm khác rất thích các trang web có cấu trúc rõ ràng. Khi Googlebot thấy một thẻ <figure> chứa ảnh và một <figcaption>, nó hiểu ngay lập tức rằng đoạn text trong figcaption là mô tả cho bức ảnh đó. Điều này giúp hình ảnh của bạn có cơ hội xếp hạng cao hơn trong tìm kiếm hình ảnh.
• Accessibility (Khả năng tiếp cận): Đối với người dùng khiếm thị sử dụng trình đọc màn hình, thẻ <figure> cực kỳ hữu ích. Công cụ sẽ đọc nội dung thẻ alt của ảnh, sau đó thông báo rằng có một chú thích và đọc nội dung của <figcaption>. Điều này tạo ra trải nghiệm liền mạch và đầy đủ thông tin.

So sánh figure với các thẻ HTML khác

Để thực sự hiểu cách sử dụng thẻ figure, việc so sánh nó với các thẻ khác là rất cần thiết. Hai câu hỏi thường gặp nhất là về thẻ <div> và thẻ <img>.

Sự khác biệt giữa thẻ figure và thẻ div là gì?

Sự khác biệt cốt lõi nằm ở ngữ nghĩa.

• Thẻ <div>: Là một thẻ container phi ngữ nghĩa (non-semantic). Nó không mang bất kỳ ý nghĩa nào về nội dung bên trong. Mục đích chính của <div> là để nhóm các phần tử lại với nhau cho mục đích tạo kiểu bằng CSS hoặc xử lý bằng JavaScript.
• Thẻ <figure>: Là một thẻ ngữ nghĩa. Nó nói rõ rằng nội dung bên trong là một đơn vị độc lập, tự giải thích (như hình ảnh, biểu đồ).

Lời khuyên: Nếu bạn chỉ muốn tạo một cái hộp để trang trí, hãy dùng <div>. Nếu bạn đang trình bày một nội dung minh họa và chú thích của nó, hãy dùng <figure>.

Khi nào nên dùng figure thay vì chỉ dùng thẻ img?

Không phải lúc nào hình ảnh cũng cần được bọc trong <figure>. Quy tắc rất đơn giản:

• Dùng <figure> khi:
  • Hình ảnh cần có một chú thích đi kèm (<figcaption>).
  • Nội dung chính của bài viết có đề cập đến hình ảnh đó (ví dụ: “…như được thấy trong Hình 1”).
  • Hình ảnh là một phần quan trọng, độc lập của nội dung (như biểu đồ, sơ đồ).
• Chỉ dùng <img> khi:
  • Hình ảnh chỉ mang tính trang trí, không đóng góp trực tiếp vào nội dung chính (ví dụ: icon, ảnh nền, logo ở góc trang).
  • Hình ảnh không cần bất kỳ chú thích nào.

Mẹo CSS hữu ích cho thẻ figure

Mặc định, thẻ <figure> có thể có một chút margin do trình duyệt thêm vào. Dưới đây là hai mẹo CSS đơn giản để bạn tùy chỉnh nó theo ý muốn.

Làm cách nào để căn giữa thẻ figure trong CSS?

Đây là một yêu cầu rất phổ biến. Cách dễ nhất là áp dụng thuộc tính margin tự động cho lề trái và phải. Bạn cũng cần đảm bảo nó là một block element.

figure {
  display: block; /* Mặc định đã là block */
  margin-left: auto;
  margin-right: auto;
  width: 80%; /* Hoặc một chiều rộng cụ thể */
}

Cách này sẽ căn giữa toàn bộ khối <figure> so với phần tử cha của nó.

Tùy chỉnh kiểu chữ và khoảng cách cho figcaption

Bạn có thể dễ dàng làm cho chú thích của mình nổi bật hoặc tinh tế hơn. Chỉ cần nhắm mục tiêu vào thẻ figcaption trong CSS.

figcaption {
  color: #555; /* Màu chữ xám đậm */
  font-style: italic; /* In nghiêng chữ */
  font-size: 0.9em; /* Kích thước chữ nhỏ hơn một chút */
  text-align: center; /* Căn giữa nội dung chú thích */
  margin-top: 10px; /* Tạo khoảng cách với hình ảnh bên trên */
}

Với vài dòng CSS, bạn đã có thể làm cho phần trình bày của mình chuyên nghiệp hơn hẳn.

Kết luận

Qua bài viết này, Da I Kin hy vọng bạn đã hiểu rõ thẻ figure và figcaption là gì. Chúng không phải là những thẻ phức tạp, mà là công cụ mạnh mẽ để cải thiện cấu trúc và ngữ nghĩa cho trang web của bạn.

Sử dụng <figure> đúng cách không chỉ giúp code của bạn sạch sẽ hơn mà còn mang lại lợi ích rõ rệt cho SEO và khả năng tiếp cận. Hãy tập thói quen sử dụng nó cho các nội dung minh họa cần chú thích nhé.

Bạn còn mẹo hay nào khác khi làm việc với thẻ <figure> không? Hãy để lại bình luận bên dưới để cùng trao đổi nhé!

Nếu bạn đang cần một website chuyên nghiệp được xây dựng trên nền tảng code chuẩn mực và tối ưu, Da I Kin luôn sẵn sàng tư vấn. Liên hệ với chúng tôi để bắt đầu dự án của bạn ngay hôm nay!