Media Tags

Lecture 32:- Media Tags

HTML provides several tags for embedding multimedia content, such as images, audio, and video, into web pages. Some of the most commonly used media tags are:

1. <img>: Embeds an image into a web page. The src attribute specifies the URL of the image file, while the alt attribute provides a text description of the image for screen readers and other assistive technologies. For example:

cssCopy code

<img src="image.jpg" alt="A beautiful landscape">

1. <audio>: Embeds an audio file into a web page. The src attribute specifies the URL of the audio file, while the controls attribute displays playback controls. For example:

bashCopy code

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

1. <video>: Embeds a video file into a web page. The src attribute specifies the URL of the video file, while the controls attribute displays playback controls. For example:

cssCopy code

<video width="320" height="240" controls>  <source src="video.mp4" type="video/mp4">  Your browser does not support the video element. </video>

1. <picture >: Defines a container for multiple <img> elements, each representing different sources for different display/device scenarios. The browser chooses the most appropriate source based on the current layout, screen size, and screen density, using the srcset and media attributes. For example:

phpCopy code

<picture >  <source srcset="image-large.jpg" media="(min-width: 800px)">  <img src="image-small.jpg" alt="A beautiful landscape"> </picture >

1. <figcaption>: Provides a caption for a <figure> element that contains multimedia content. For example:

cssCopy code

<figure>  <img src="image.jpg" alt="A beautiful landscape">  <figcaption>A beautiful landscape in the mountains</figcaption> </figure>