EasyCompilers

Vocabulary for this course

The terms the chapters assume, in plain words. You can open this from any chapter.

accessible name
What a browser tells a screen reader an element is called, taken from its text, its label, or an alternative description.
aria-label
An attribute that gives a control an accessible name when no visible text can serve as one.
attribute
A name, sometimes with a value, inside an opening tag that describes the element further, such as where a link goes.
control
An interactive part of a page, such as a text box, checkbox, or button, that a person can operate.
element
One complete piece of a page: an opening tag, its content, and a closing tag, or a single tag when it holds nothing.
empty element
A tag that holds nothing and has no closing partner, such as an image or a line break.
for attribute
An attribute on a label that names the control it describes, so clicking the text operates that control.
form action
The address a submitted form sends its values to, declared in the opening tag of the form.
id attribute
An attribute that gives one element a unique name, which a link or a label can point to.
label
The text attached to a control that says what it is for; clicking it focuses or operates the control it belongs to.
landmark
A page region with a recognised purpose, such as header, nav, or main, that a screen reader can jump to directly.
markup
The tags and attributes that describe the structure of a document, as opposed to its styling or behaviour.
method
The attribute that says whether a form's values travel in the address or in the request body.
name attribute
An attribute that gives a form control a key for its value when the form is submitted.
regular expression
A pattern of characters used to test or match text, such as the shape an email address must have.
request body
The part of a form submission that carries the field values, separate from the address.
reset button
A button that puts every control in a form back to the value it had when the page loaded.
sandbox
An isolated place where a page runs without reaching the rest of the site or the network.
screen reader
Software that speaks a page aloud or shows it in braille, so someone who cannot see the display can still use it.
tag
The name of an element written in angle brackets, such as p or img, which marks where that piece of the page begins or ends.

HTML from the ground up

Media and embedding

Audio, video and images that adapt to the screen — plus when a frame around someone else’s page is the right answer, and when it is not.

Part 6 of 13

Intermediate16 min readBack to Courses

Audio and video are elements

Both <audio> and <video> take a src or one or more <source> children, and both need controls — without it there is nothing to press and the media is invisible to anyone who does not already know it is there. Anything between the tags is fallback content, shown only when the browser cannot play what you gave it: use it for a sentence, not for a second copy of the player.

Our playground has no files to point at, so the examples use tiny inline data URLs. In a real project, src is a path to a file — and the same structure applies.

The browser picks the first source it can play

A <video> or <audio> with several <source> children is a list of offers. The browser reads them in order and takes the first whose type it understands — which is why the WebM file usually comes before the MP4, and why the type attribute is worth writing: without it the browser may download a file just to discover it cannot play it.

The text between the tags is what remains when no source works, so make it a sentence that says what is missing. A browser that can play the media never shows it.

Captions, and the reason there is no excuse

<video controls width="640" poster="poster.jpg">
  <source src="talk.webm" type="video/webm">
  <source src="talk.mp4" type="video/mp4">
  <track kind="captions" src="talk.en.vtt" srclang="en" label="English" default>
  Your browser cannot play this video.
</video>

What each attribute buys you

  • controls — the play button, the timeline, the volume. Without it the media cannot be operated at all.
  • kind="captions" — a subtitle track. Captions are for people who cannot hear it, which is not the same audience as subtitles for a language you do not speak.
  • poster — what is shown before playback starts, instead of a black rectangle.
  • preload="metadata" — enough to know the duration, without downloading the file.
  • autoplay — almost always the wrong choice: it ignores whether the visitor wanted sound.

Captions are not subtitles

<track kind="captions"> is for people who cannot hear the audio: it carries the dialogue and the sounds that matter, such as a door closing or a phone ringing. kind="subtitles" translates dialogue for someone who can hear it but does not speak the language. They are different audiences, and a page that offers only one has served only one of them.

A track needs src, srclang and a label; default makes it the one that starts on. The file is WebVTT, a plain-text format of cues and timestamps. If the video has no captions, the honest fallback is a transcript below it — text everyone can read, search and translate.

A transcript is the other track

A transcript is the low-tech half of the same job. Put the spoken words, and the sounds that matter, in a paragraph or a list under the video, and link to it from the page. It is searchable, it can be translated, it works on a train with no signal, and it is the only version a reader can skim. Captions follow the video in time; a transcript does not, so the two serve different readers rather than competing. If you have neither, write the transcript first: it is the easier one to produce, and it makes the captions easier to write afterwards.

A player with a fallback

Wrap the source in an <audio> element with controls, and leave a sentence inside for browsers that cannot play it.

Live Preview
Console output will appear here...

3 left to do

  • There is an audio element
  • The player shows its controls
  • There is fallback text inside the element

The fallback text goes between <audio> and </audio>, after the <source>.

One image, several files

A phone on a slow connection should not download the same 1600-pixel photograph a desktop gets. <picture> lets the browser choose: each <source> carries a rule, and the first one that matches wins. The <img> inside is required — it is the fallback for a browser that understands none of the rules, and it is where the alt text lives.

An image that adapts

Add a second <source> for wide screens so the browser can pick between them, and give the fallback image an alt.

Live Preview
Console output will appear here...

2 left to do

  • The image is inside a picture element
  • There are at least two sources to choose from
  • The fallback image has an alt

<source media="(min-width: 900px)" srcset="…"> — the first matching source wins.

Frames

An <iframe> puts another document inside yours: a map, a video player hosted elsewhere, a payment form. It carries a real cost — another page’s scripts, styles and layout decisions running inside your page — so it is for content you do not control and cannot recreate. Embedding an entire site in a frame breaks scrolling, history and accessibility at once.

Two attributes are worth knowing from the start. sandbox limits what the embedded document may do, and title gives the frame a name, because a frame is announced like an image and "frame" alone tells nobody anything. When the document is a fragment you write yourself, srcdoc holds it inline: useful for a small isolated widget, and it works without a server.

A frame with a name

Put an inline document in the frame with srcdoc, and give the frame a title that says what it contains.

Live Preview
Console output will appear here...

2 left to do

  • The frame has its own document (srcdoc)
  • The frame has a title

Angle brackets inside the attribute are escaped: srcdoc="&lt;p&gt;Hi&lt;/p&gt;".

Every embedded frame is a third party. If it disappears, breaks or goes down, your page shows a hole — so keep the content that matters in your own document.

Three media mistakes worth avoiding: autoplay with sound, which talks over whatever the visitor was doing; a player without controls, which leaves the media visible but impossible to start; and a list of <source> elements with no type, which makes the browser download files it cannot play. If the video matters, give it captions.

Try these next

  • Put two <source> elements in a video, WebM first and MP4 second, and give each one a type.
  • Write a <track> for captions with srclang, label and default.
  • Add a transcript under a video and link to it from the page.

Check what you learned

One question at a time. A wrong answer explains itself — take another go.

Part 1 of 5

What does a <video> element do without controls?