Images, audio, video, figure
Objectives
- Use img with meaningful alt
- Wrap with figure/figcaption
- Embed HTML5 audio/video
Lesson
img is a void tag: src + alt. Alt describes informative content; alt="" if purely decorative.
Prefer SVG for logos and icons (sharp at any size). For photos: modern formats (WebP/AVIF) when the pipeline allows — Next.js Image handles this later.
figure + figcaption pair media with a caption. Great for course illustrations and annotated screenshots.
video and audio support controls, preload, subtitle tracks (VTT). On mobile, autoplay with sound is often blocked.
Performance: width/height (or CSS aspect-ratio) prevent layout shift (CLS) while images load.
Practice lab
Fill alt and figcaption with non-empty text.
✓ alt="✓ <figcaption>
1
2
3
4
Assessment
Assessment
1. A decorative logo next to a text title may have…