HTML <figure> tag

HTML <figure> tag : Definition

• The <figure> tag defines self-contained contents, like illustration, diagram, photo or a code snippet that is referenced in the main text, etc

• The figure, the caption , and its contents are referenced as a single unit.

• When the content of the <figure> element is related to the main flow, even then its position is independent of the main flow, and if removed it should not be affecting the flow of the document.

<figure> tag example :

<!DOCTYPE html>
<html>
<body>
<style>
figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
}



img {
    max-width: 220px;
    max-height: 150px;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}


</style>
<h1>The figure element example</h1>
<figure>
    <img src="/media/examples/elephant-660-480.jpg"
         alt="Learn web designing">
    <figcaption>Learn web designing.</figcaption>
</figure>
</body>
</html>

OUTPUT :


The figure element example

Learn web designing
Learn web designing.