<source> Tag — HTML Technical Interview Questions & Answers

Alternate media resources for audio/video/picture.

<source> Tag

  • Alternate media resources for audio/video/picture.
  • <source> is the <source> HTML element. HTML uses this tag so the browser (and screen readers) know what the piece is, not only how it looks.
  • Board: <source>…</source> 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: <source>: the <source> HTML element. Example: <source>…</source>

Code Examples for <source> Tag

<source> Tag — 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>

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

How to Explain <source> Tag to an Interviewer

What is the <source> tag?

the <source> HTML element <source>…</source>

One common mistake?

wrong nesting or missing a required attribute