HTML Images and media elements

How to use images and media in HTML

In this lesson, we will learn how to use images and media elements in HTML. Images and media are essential for creating visually appealing and engaging web pages.

This is an image tag:

<img src="path/to/image.jpg" alt="Description of the image" />

The 2 required attributes are src and alt. The src attribute specifies the path to the image file, and the alt attribute provides a text description of the image for accessibility purposes and/or if the image cannot be displayed.

The src path could be a relative path to an image file on your server or an absolute URL to an image hosted on the internet.

This is how an image with a remote url looks like in HTML:

<img src="https://picsum.photos/200/300" alt="An example image" />

And this is how a broken image looks like:

<img src="https://example.com/broken-image.jpg" alt="Broken image" />

---

Other image attributes

You can also add additional attributes to the <img> tag to control the appearance and behavior of the image. Some common attributes include:

width and height: Specify the dimensions of the image in pixels. For example, <img src="image.jpg" alt="An image" width="300" height="200" />.

loading: Specifies how the image should be loaded. The most common values are lazy (to load the image only when it is about to be displayed) and eager (to load the image immediately). For example, <img src="image.jpg" alt="An image" loading="lazy" />. Lazy loading requires you to actually see the image for it to load.

The picture element

The <picture> element is used to provide multiple sources for an image, allowing the browser to choose the best one based on the device’s capabilities and screen size. This is useful for responsive design, where you want to display different images for different screen sizes.

For example:

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)" />
  <source srcset="image-medium.jpg" media="(max-width: 1200px)" />
  <img src="image-large.jpg" alt="An example image" />
</picture>

Captions for images and the figure element

The <figure> element is used to group an image and its caption together. It is often used to provide additional context or information about the image. The <figcaption> element is used to provide the caption for the image.

You know that you have figures in paper documents as well, right? Well, this is the same thing, but for web pages.

For example:

<figure>
  <img src="image.jpg" alt="An example image" />
  <figcaption>This is an example image with a caption.</figcaption>
</figure>

The video element

The <video> element is used to embed video content in the page. The src attribute is used to specify the URL of the video file, and the controls attribute is used to add playback controls such as play, pause, and volume.

For example:

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

Each browser and/or operating system renders the video controls differently, so it is recommended to test your videos on different devices and browsers to ensure they work as expected. Also, not all browsers support all video formats, so it is a good practice to provide multiple sources for the video using the <source> element.

Embedding YouTube videos with the iframe element

The <iframe> element is used to embed content from another source, such as a YouTube video. The src attribute is used to specify the URL of the content you want to embed.

For example, to embed a YouTube video, you can use the following code:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

This will show the entire youtube video player on your page, allowing users to play the video without leaving your site. Check this out!

But the <iframe> element is not used just for YouTube videos. It allows you to embed an whole ahh website inside your page. For example, you can embed a Google Map or a Twitter feed using the <iframe> element or even this blog! (Inception!)

The audio element

The <audio> element is used to embed audio content in the page. The src attribute is used to specify the URL of the audio file, and the controls attribute is used to add playback controls such as play, pause, and volume.

For example:

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

Just like the video tag, the audio tag is widely supported, but it is still a good idea to provide a fallback message for browsers that do not support it. The fallback message will be displayed if the browser does not support the <audio> element. Also, audio files can take a lot of bandwidth and storage space, so be careful with the size of the audio files you use.

This is how an audio file looks like in HTML:

SoundHelix Song 1 T. Schürger

Summary

In this lesson, we learned how to use images and media elements in HTML. We covered the following topics:

• How to use the <img> tag to insert images
• How to use the <picture> element for responsive images
• How to use the <figure> and <figcaption> elements for images with captions
• How to use the <video> element to embed videos
• How to use the <iframe> element to embed content from other sources, such as YouTube
• How to use the <audio> element to embed audio content

Questions