Skip to main content

Images and Multimedia

Multimedia content is essential for making a webpage engaging and for communicating information effectively. HTML provides specific tags to embed images, audio, and video natively.

Images (<img>)​

The <img> tag is used to embed an image in a web page. It is an empty tag, meaning it does not have a closing tag and relies entirely on its attributes.

Key Attributes​

  1. src (Source): Required. Specifies the path (URL) to the image file. This can be a relative path (an image on your own server) or an absolute path (an image hosted elsewhere).
  2. alt (Alternative Text): Required (for best practices and accessibility). Provides alternative text that is displayed if the image cannot be loaded and is read by screen readers for visually impaired users. It is also key for SEO.
  3. width and height: (Optional) Specify the width and height of the image in pixels.
<img src="https://example.com/logo.png" alt="Example Company Logo" width="200" height="100">

Audio (<audio>)​

The <audio> tag allows you to embed sound content. For the user to be able to play, pause, or control the volume, you must include the controls attribute.

<source> Element​

Although you can use the src attribute on the <audio> tag, it is a best practice to use one or more <source> elements inside it. This allows you to provide different formats of the same audio file to ensure compatibility across different browsers.

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

(The fallback text will only be shown if the browser is so old that it doesn't recognize the <audio> tag).

Video (<video>)​

Similar to <audio>, the <video> tag embeds interactive video content. It also requires the <source> tag for multiple formats and the controls attribute to display playback controls.

Additional Video and Audio Attributes​

Both tags share some useful attributes:

  • autoplay: Causes the media to start playing automatically as soon as it is ready (use with extreme caution, as it often annoys users and many browsers block autoplay with sound).
  • loop: Causes the file to play in a loop indefinitely.
  • muted: Mutes the audio initially. If you use autoplay, you must often use muted as well for the browser to allow it.
<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="promotional-video.mp4" type="video/mp4">
  <source src="promotional-video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

(The poster attribute specifies an image to be shown while the video is downloading or until the user hits "Play").