Skip to content
Lucia LADDERHTML Fundamentals Chapter 04Loading learning progress…
HTML-04-04 · LESSON 4 / 4 · ± 10 MINUTES
Figures, Audio & Video Basics
After this lesson, you can group images with captions and recognize the need for controls, captions, and transcripts in media.
BEGIN WITH A QUESTION
Understanding begins with a question.
A photograph of an observatory may be easier to understand with a caption. Yet a visible caption and alternative text do not always serve the same purpose.
Group images with captions and recognize the need for controls, captions, and transcripts in media.
UNDERSTAND THE CONCEPT
Figure connects media and context
Figure wraps self-contained content such as a diagram, photograph, or code snippet. Figcaption provides a visible caption as its first or last child. Alt still explains the image to people who cannot see it; the caption may add different context.
Moving media needs controls
Audio and video provide a player when given controls. Avoid autoplay for learning material. Supply media through src or source elements. The files must actually exist; writing a file name does not create a recording.
Access to media content
Video with sound needs synchronized captions for speech and important sounds, usually through track kind="captions" with a WebVTT file. A transcript provides access without playing the media. Essential visual information also needs a suitable alternative. This course uses media markup examples without supplying audio or video recordings.
EXAMPLE / CONTEXT
Examples clarify concepts.
HTML EXAMPLE
<figure>
<img src="assets/observatory.svg" alt="A telescope points toward the Moon" width="640" height="360">
<figcaption>An illustration of Moon observation from an observatory.</figcaption>
</figure>
<!-- Media pattern: supply your own recording and caption files before use. -->
<video controls width="640">
<source src="pengamatan.mp4" type="video/mp4">
<track kind="captions" src="pengamatan-id.vtt" srclang="id" label="Indonesia">
</video>
<p>Transcript: an observer points a telescope toward the Moon.</p>BROWSER RESULT
Try the figure with the sample asset. The video section demonstrates a markup pattern; recordings and WebVTT files are not included, so no video plays.
TRY TOGETHER
Practice clarifies understanding.
Try as often as you need. The independent task that follows records lesson completion.
WRITE · OBSERVE · UNDERSTAND
A figure with a story
Create a figure containing the observatory image with alt and dimensions, then a figcaption explaining the observation context. Add a paragraph explaining that the example is an illustration.
Editor shortcuts & help
- Ctrl + Space
- Show suggestions · ↑ ↓ select · Enter accept · Esc close
- Shift + Alt + F
- Format code
- Ctrl/⌘ + F
- Find and replace text
- Ctrl/⌘ + [ / ]
- Decrease / increase indentation
- Tab
- Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
- Ctrl/⌘ + Z
- Undo changes, including formatting
Suggestions use the language, snippets, and local code context. Formatting runs in your browser.
Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.
STEP-BY-STEP HINTS
- Figure wraps img and figcaption as siblings.
- A caption can explain the observation context; alt explains the visual information.
TAKE THIS UNDERSTANDING WITH YOU
Practice gives a foundation.
- Figure groups self-contained content; figcaption explains its context.
- Audio and video should provide controls.
- Captions and transcripts support media access; source files must be available.
A lesson is complete when the independent task meets its goals. Return to the reading at any time.