- The figure element is particularly useful for images, illustrations, diagrams, videos, audio clips, and other types of media.
- Use the alt attribute for images within the figure element to provide alternative text for accessibility.
- The figure element helps improve accessibility and search engine optimization by indicating the content and its context.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Urbanist:wght@300;400;600;700;800;900&display=swap");
html {
font-family: "jost", sans-serif;
background-color: #efefef;
}
h1 {
font-weight: bold;
}
img {
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>HTML FIGURE TAG</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum nihil magni illum. Ullam delectus cum corporis
illo suscipit est excepturi eveniet blanditiis dicta officia, mollitia fugit saepe temporibus nesciunt
quibusdam!
</p>
<!-- add figure tag here -->
<figure>
<img src="../images/E3CCA633-C689-4DD9-8B20-79E7C5A88487.jpg" alt="my image" width="500" height="auto" />
<figcaption>This is my image</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque dignissimos repellendus libero odio delectus
quisquam a in, at quos vitae deserunt ipsam non odit maiores quis? Ea vitae officiis impedit.
</p>
</body>
</html>
Do leave your comments