Images, audio, video and embeds

What you will learn

• <img> with src and alt
• captions with <figure> and <figcaption>
• <audio> and <video> with the controls attribute
• embedding another page with <iframe>

Understand the idea

The <img> tag shows a picture. It is a void element, so it has no closing tag. src is the address of the image file and alt is a short description used by screen readers, shown when the picture cannot load, and read by search engines. Good alt text describes what the picture shows, for example alt="A red kite flying over a field". A purely decorative picture can use an empty alt="". width and height reserve space so the page does not jump while the picture loads.

<figure> wraps a picture, diagram or code sample together with <figcaption>, its caption. They show the reader that the caption belongs to the picture, which helps both people and search engines.

<audio> and <video> play sound and movies without any extra software. Add the controls attribute to show the play button and volume. Inside the tag you can list one or more <source> files in different formats, and any text you write between the tags is shown to a browser that cannot play them. Never start sound playing automatically; it surprises and annoys visitors.

<iframe> embeds another page inside yours, such as a map or a video from another site. Always give it a title that describes it. Only embed sites you trust, because the embedded page runs inside yours. In the lesson preview, files from the internet are blocked for safety, so pictures appear as their alt text; the markup is what we are checking.

Example

<figure>
  <img src="kite.jpg" alt="A red kite flying over a field" width="300">
  <figcaption>A kite on a windy day</figcaption>
</figure>

<audio controls>
  <source src="birdsong.mp3" type="audio/mpeg">
  Your browser cannot play audio.
</audio>

<video controls width="320">
  <source src="clip.mp4" type="video/mp4">
</video>

Your turn: code to type and practise

Write a figure that contains an image (with src and alt) and a caption, then an audio player with controls and a video player with controls.

← Links, lists and tablesSemantic page layout →