HTML Multimedia

HTML multimedia allows developers to add images, audio, videos, and embedded webpages to websites. Multimedia makes webpages more attractive, interactive, and informative. HTML provides different tags to display multimedia content without requiring external plugins.

HTML Images

The <img> tag is used to display images on a webpage. The src attribute specifies the image path, and the alt attribute provides alternative text for accessibility.

Syntax 


<img src="image.jpg"

alt="Example Image">

Example 


<img src="nature.jpg"

alt="Nature Image"

width="300">

HTML Audio

The <audio> tag is used to add sound files such as music and voice recordings to webpages. The controls attribute provides play, pause, and volume controls.

Syntax 


<audio controls>


    <source src="music.mp3"

    type="audio/mpeg">


</audio>

Example 


<audio controls>


    <source src="song.mp3"

    type="audio/mpeg">


</audio>

HTML Video

The <video> tag is used to display videos on webpages. The controls attribute provides playback features like play, pause, and fullscreen.

Syntax 


<video controls>


    <source src="movie.mp4"

    type="video/mp4">


</video>

Example 


<video width="400" controls>


    <source src="sample.mp4"

    type="video/mp4">


</video>

HTML Iframe

The <iframe> tag is used to embed another webpage, map, or video inside the current webpage. It is commonly used for YouTube videos and Google Maps.

Syntax 


<iframe src="page.html">

</iframe>

Example 


<iframe

src="https://example.com"

width="500"

height="300">


</iframe>

Best Practices

  • Always provide the alt attribute for images.
  • Compress images, audio, and videos for faster loading.
  • Use the controls attribute for audio and video.
  • Specify correct file types in the source tag.
  • Use iframes only from trusted websites.
  • Keep multimedia content related to webpage content.