Working with images and multimedia in HTML

HTML provides several elements and attributes that allow you to include images and other types of multimedia in your web pages. In this post, we are going to explore some of them.

Images

The <img> element is used to embed an image in an HTML document. It has the following syntax:

<img src="image-url" alt="image description">

The src attribute specifies the URL of the image file, and the alt attribute provides a text alternative for the image, which is important for accessibility.

READ ALSO: INTRODUCTION TO CSS AND HOW IT WORKS WITH HTML

Here is an example of an <img> element that displays an image stored on the same server as the HTML document:

<img src="/images/logo.png" alt="Company logo">

You can also use the width and height attributes to specify the dimensions of the image:

<img src="/images/logo.png" alt="Company logo" width="200" height="100">

It’s important to note that the <img> element does not have a closing tag. It is an empty element, which means it has no content and does not require a closing tag.

If you want to use an image as a link, you can nest the img tag inside an a tag.

<a href="https://example.com">
  <img src="image.jpg" alt="A description of the image">
</a>

Audio

The <audio> element is used to embed audio files in an HTML document. It has the following syntax:

<audio src="audio-url"></audio>

The src attribute specifies the URL of the audio file. You can also use the controls attribute to include playback controls for the audio, such as a play button and a volume slider:

<audio src="audio-url" controls></audio>

You can use the <source> element to provide multiple sources for the audio, in case the browser does not support the specified file format:

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

In this example, the audio file will be played in the browser if it supports either the MP3 or Ogg format.

Video

To add a video to an HTML page, you can use the video tag. The src attribute specifies the URL of the video file, and the type attribute specifies the MIME type of the video.

<video src="video.mp4" type="video/mp4"></video>

You can also use the controls attribute to add playback controls to the video.

<video src="video.mp4" type="video/mp4" controls></video>

The video tag supports several other attributes, such as width, height, autoplay, and loop, that you can use to customize the appearance and behavior of the video.