Thẻ figure trong HTML

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,... và thẻ figcaption để chú thích, chi tiết như nào hãy cùng chúng tôi phân tích:

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ở <figure> và thẻ đóng </figure> 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.

  • ★★★★★ ★★★★★
  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
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 *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
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