Day 4: Visuals & Media

The web is multimedia. Let’s learn to embed more than just text.

Images (img)

The <img> tag embeds an image. It is self-closing.

<img src="cat.jpg" alt="A cute orange cat sitting on a sofa">

Attributes

• src: Source (URL or file path).
• alt: Alternate text. CRITICAL for screen readers and SEO. Describes the image if it fails to load.
• width / height: Optional, but good for performance to prevent layout shifts.

Figure & Figcaption

The semantic way to wrap an image with a caption.

<figure>
    <img src="chart.png" alt="Sales growth chart">
    <figcaption>Figure 1: Sales grew by 20% in Q4.</figcaption>
</figure>

Video (video)

HTML5 makes embedding video easy (no Flash needed!).

<video controls width="500">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

• controls: Shows play/pause buttons.
• autoplay: Starts automatically (often needs muted to work).
• loop: Repeats the video.
• poster: Image shown before video loads.

Audio (audio)

Just like video, but for sound.

<audio controls>
    <source src="podcast.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

---

Homework for Day 4:

1. Find an image of your hobby.
2. Embed it on your page.
3. Write a good alt description for it.
4. Challenge: Try embedding a YouTube video using their “Embed” code (iframe).

Day 5: Organizing data with Tables!