Images and figures

What you will build

Add a project screenshot that remains understandable when the image cannot be seen.

Understand the idea first

src locates the file, alt carries the image's information, and dimensions reserve space. A caption connects it to the surrounding content.

Build it step by step

<figure>
  <img
    src="images/first-page.png"
    alt="My HTML learning page showing progress and the first weekly note"
    width="960"
    height="540"
  />
  <figcaption>The page after lesson four.</figcaption>
</figure>

1. Create images, add your screenshot, and name it first-page.png.
2. Place the figure inside the learning article and verify it loads.
3. Break the filename briefly to test whether the alt text carries the information.
4. Enter the image's real pixel width and height.

Read the important lines

• Alt text describes the information the image provides here.
• Use alt="" for a purely decorative image.
• figure groups self-contained media with its caption.

Common mistakes and what to check

Extend the idea: audio, video, and embedded pages

After images, you will often meet media and embedded content. Learn the selection rules rather than memorizing every attribute:

<video controls width="640" poster="images/video-cover.jpg">
  <source src="media/learning-demo.mp4" type="video/mp4" />
  Your browser cannot play this video.
  <a href="media/learning-demo.mp4">Download it instead</a>.
</video>

• Give audio and video native controls; do not autoplay sound.
• Supply captions for video and a transcript for important audio.
• Use iframe only when an embedded page is necessary, and give it a useful title.
• svg suits scalable graphics and canvas suits script-driven drawing. Neither replaces real text and headings.

Practice without copying

Write alt text for a course certificate screenshot and for a decorative star beside a heading.

Completion check

• My page contains the required new content
• I can explain the key tags or attributes without the answer
• I deliberately created and fixed at least one error