<figure> Element

According to W3C: The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

Traditionally, in printed material like books and magazines charts, pictures, drawings and more would be accompanied by a caption. The <figure> element in combination with the <figcaption> element allows us to semantically markup the figure with a caption.

A simple example:

<figure>
    <img src="/media/examples/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

For responsive images:

<figure>
    <picture>
        <source srcset="hugePic.jpg" media="(min-width: 1200px)" />
        <source srcset="normalPic.jpg" media="(min-width: 800px) and (max-width: 1200px)" />
        <source srcset="smallPic.jpg" media="(max-width: 800px)" />
        <img src="default.jpg" alt="image description" />
    </picture>
    <figcaption>This picture taken by:....</figcaption>
</figure>