<picture> and <source> Tags — HTML Technical Interview Questions & Answers

Responsive, format-aware image selection.

<picture> and <source> Tags

  • Responsive, format-aware image selection.
  • <picture> is the <picture> HTML element. HTML uses this tag so the browser (and screen readers) know what the piece is, not only how it looks.
  • Board: <picture>…</picture> 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: <picture>: the <picture> HTML element. Example: <picture>…</picture>

Code Examples for <picture> and <source> Tags

<picture> and <source> Tags — working example

<figure>
  <video controls width="480" poster="/media/poster.jpg">
    <source src="/media/intro.mp4" type="video/mp4" />
    <track kind="captions" src="/media/intro.vtt" srclang="en" label="English" />
    Download the <a href="/media/intro.mp4">MP4</a>.
  </video>
  <figcaption>Course intro with captions</figcaption>
</figure>

<audio controls>
  <source src="/media/tip.mp3" type="audio/mpeg" />
</audio>

<picture> and <source> Tags — provide controls, multiple source types when needed, and captions/transcripts for accessibility.

How to Explain <picture> and <source> Tags to an Interviewer

What is the <picture> tag?

the <picture> HTML element <picture>…</picture>

One common mistake?

wrong nesting or missing a required attribute