articles

Home / DeveloperSection / Articles / Explain the use and concept of Media tags in HTML with examples.

Explain the use and concept of Media tags in HTML with examples.

Explain the use and concept of Media tags in HTML with examples.

Ravi Vishwakarma 171 06-Jun-2024

HTML media tags are used to attach numerous forms of media content material, including pictures, audio, and video, to net pages. These tags help enhance the user's enjoyment by providing multimedia factors directly in the content. 

Here’s an overview of the most normally used HTML media tags:

1. <img> Tag

The <img> tag is used to attach images in HTML documents.

Attributes:

  • src: Specifies the URL of the image.
  • alt: Provides alternative text for the image if it cannot be displayed.
  • width and height: Set the dimensions of the image.
  • title: Adds a tooltip text when the mouse is over the image.

Example:

<img src="https://media.sproutsocial.com/uploads/2022/05/2204_cases-for-tagging.jpg" alt="Description of image" width="600" height="400">

2. <audio> Tag

The <audio> tag is used to attach audio files.

Attributes:

  • src: Specifies the URL of the audio file.
  • controls: Adds audio controls, such as play, pause, and volume.
  • autoplay: Automatically plays the audio when the page loads.
  • loop: Plays the audio repeatedly.
  • muted: Mutes the audio by default.

Example:

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

3. <video> Tag

The <video> tag is used to attach video files.

Attributes:

  • src: Specifies the URL of the video file.
  • controls: Adds video controls, such as play, pause, and volume.
  • autoplay: Automatically plays the video when the page loads.
  • loop: Plays the video repeatedly.
  • muted: Mutes the video by default.
  • width and height: Set the dimensions of the video.

Example:

<video width="600" height="400" controls>
  <source src="videofile.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

4. <source> Tag

The <source> tag is used to specify multiple media resources for the <audio> and <video> tags. This allows the browser to choose the most appropriate resource.

Attributes:

  • src: Specifies the URL of the media file.
  • type: Specifies the MIME type of the media file.

Example:

<video width="600" height="400" controls>
  <source src="videofile.mp4" type="video/mp4">
  <source src="videofile.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

5. <track> Tag

The <track> tag is used to specify text tracks for <video> and <audio> elements, such as subtitles, captions, and descriptions.

Attributes:

  • src: Specifies the URL of the track file.
  • kind: Specifies the kind of text track (e.g., subtitles, captions, descriptions).
  • srclang: Specifies the language of the track text.
  • label: Provides a user-readable title for the track.
  • default: Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate.

Example:

<video width="600" height="400" controls>
  <source src="videofile.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  Your browser does not support the video tag.
</video>

6. <picture> Tag

The <picture> tag provides a container for multiple <source> elements and one <img> element. It offers advanced control over responsive images.

Attributes: None, but it contains <source> and <img> tags with their respective attributes.

Example:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 500px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image example">
</picture>

Summary

HTML media tags are vital tools for integrating multimedia content into net pages. They offer a way to beautify the person revel in with the aid of making content material greater interactive and engaging. By expertise and utilizing those tags, web builders can create rich, multimedia-pushed websites.


Updated 07-Jun-2024
Hi, my self Ravi Vishwakarma. I have completed my studies at SPICBB Varanasi. now I completed MCA with 76% form Veer Bahadur Singh Purvanchal University Jaunpur. SWE @ MindStick | Software Engineer | Web Developer | .Net Developer | Web Developer | Backend Engineer | .NET Core Developer

Leave Comment

Comments

Liked By