HTML / Markup Public

Responsive Image Figure

An HTML figure pattern for responsive images with a caption.

#html #image #accessibility #seo

HTML / Markup

<figure class="image-card">
  <img
    src="/assets/img/example.jpg"
    alt="A student writing code on a laptop"
    loading="lazy"
    width="1200"
    height="800"
  >
  <figcaption>
    Coding practice session with reusable snippets.
  </figcaption>
</figure>

Notes

Always write useful alt text. If the image is decorative, keep alt empty.

Snippet actions

CodShot user

Updated: 2026-06-03 14:05

Public snippets

Forks