05. Images and Media

Images can explain, inform, and add visual interest. Correct HTML makes media responsive, understandable, and accessible.

Add an image

<img
  src="images/classroom.jpg"
  alt="Students learning web development in a classroom"
  width="1200"
  height="800"
>

The src attribute identifies the file. The alt attribute communicates the image’s purpose when it cannot be seen. Width and height help the browser reserve space before the image loads.

Use captions

<figure>
  <img src="images/code.jpg" alt="HTML code displayed in an editor">
  <figcaption>A simple HTML document in a code editor.</figcaption>
</figure>

Alt text guidelines

• Describe information the image contributes.
• Use alt="" for a purely decorative image.
• Do not begin with “image of” unless the image type matters.
• Keep important text as real text instead of placing it inside an image.

Practice activity

Create an images folder, add one relevant image, write useful alternative text, and place it inside a figure with a caption.