<figure> and <figcaption> Tags — HTML Technical Interview Questions & Answers

Self-contained media with an optional caption.

<figure> and <figcaption> Tags

  • Self-contained media with an optional caption.
  • <figure> is the <figure> HTML element. HTML uses this tag so the browser (and screen readers) know what the piece is, not only how it looks.
  • Board: <figure>…</figure> Put it in body. Check it in the browser. Attributes go on the opening tag.
  • Trap: wrong nesting or missing a required attribute. CSS can still style it — don’t pick a tag only because of default italics.
  • Interview: name the tag, one attribute if it has a famous one (href, src, alt, for, type), one mistake.

Technical Interview Tip: <figure>: the <figure> HTML element. Example: <figure>…</figure>

Code Examples for <figure> and <figcaption> Tags

<figure> and <figcaption> Tags — working example

<figure>
  <picture>
    <source media="(max-width: 640px)" srcset="/photos/team-sm.jpg" />
    <img
      src="/photos/team.jpg"
      alt="Students practicing interview questions at a workshop"
      width="480"
      height="320"
      loading="lazy"
    />
  </picture>
  <figcaption>Weekend mock-interview workshop</figcaption>
</figure>

<link rel="icon" href="/favicon.ico" sizes="any" />

<figure> and <figcaption> Tags — alt describes the image; picture/srcset adapt assets; figure/figcaption caption media.

How to Explain <figure> and <figcaption> Tags to an Interviewer

What is the <figure> tag?

the <figure> HTML element <figure>…</figure>

One common mistake?

wrong nesting or missing a required attribute