Thẻ figure trong HTML

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

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

Thẻ figure trong HTML thuộc HTML5 dùng để chứa các thẻ nội dung đa phương tiện như: hình ảnh, video, biểu đồ, sơ đồ,....và thẻ figcaption để chú thích cho các nội dung đa phương tiện đó để giúp mô tả rõ hơn cho người dùng và các công cụ tìm kiếm.

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

<figure>img-figcaption<figure>

img-figcaption: Thẻ img chứa hình ảnh, video, biểu đồ, sơ đồ,... và thẻ figcaption chứa chú thích.

Bao gồm thẻ mở

và thẻ đóng bao quanh thẻ img và thẻ figcaption.

Code Thẻ figure trong HTML

Thẻ figure mặc định trong HTML

<figure>
  <img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" alt="CEO Bùi Tấn Lực" style="width:300px;height:auto">
  <figcaption>CEO Bùi Tấn Lực</figcaption>
</figure>

Chạy Thử

Css cho Thẻ figure trong HTML

<!DOCTYPE html>
<html>
<head>
<title>Css cho Thẻ figure trong HTML</title>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<h1>Css cho Thẻ figure trong HTML</h1>
<figure>
  <img src="https://webmoi.vn/thumuc/ceo-bui-tan-luc.jpg" alt="CEO Bùi Tấn Lực" width="100%">
  <figcaption>CEO Bùi Tấn Lực</figcaption>
</figure>
</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ figure 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ệ

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

Đă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