Skip to content
Azril Hakim
LinkedInGitHub

Images & Multimedia

In this section, we will explore how to add images and multimedia content to your HTML documents. Visual elements like images and videos play a crucial role in enhancing the user experience of your web pages.

Adding Images with <img>

To display an image on your web page, you can use the <img> element. The <img> element is an empty, self-closing tag that does not require a closing tag. Here’s an example of how to use it:

<img src="image.jpg" alt="A beautiful sunset" width="300" height="200">
  • src: This attribute specifies the path to the image file.
  • alt: This attribute provides alternative text for the image, which is essential for accessibility and SEO.
  • width and height: These attributes allow you to set the dimensions of the image.

Video and Audio Elements

HTML5 introduced native support for embedding audio and video content directly into web pages. You can use the <video> and <audio> elements for this purpose.

<video> Element

To embed a video, use the <video> element like this:

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>
  • src: Specify the path to the video file.
  • controls: Adds playback controls (play, pause, volume, etc.) to the video.

<audio> Element

To embed audio, use the <audio> element:

<audio src="audio.mp3" controls>
  Your browser does not support the audio tag.
</audio>
  • src: Specify the path to the audio file.
  • controls: Adds audio playback controls.

Embedding Videos from YouTube and Other Platforms

You can easily embed videos from platforms like YouTube into your HTML documents using an <iframe>. Here’s an example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Replace VIDEO_ID with the actual video ID from YouTube.

This allows you to include multimedia content from external sources seamlessly.

In this section, you’ve learned how to add images and multimedia elements to your HTML documents. These elements are essential for creating visually appealing and engaging web pages.