---
title: "Explain the use and concept of Media tags in HTML with examples."  
description: "Media tags are used to attach numerous forms of media content material, including pictures, audio, and video, to net pages."  
author: "Ravi Vishwakarma"  
published: 2024-06-06  
updated: 2024-06-07  
canonical: https://www.mindstick.com/articles/336032/explain-the-use-and-concept-of-media-tags-in-html-with-examples  
category: "html"  
tags: ["html", "html5"]  
reading_time: 3 minutes  

---

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

HTML media tags are used to attach numerous forms of media [content material](https://www.mindstick.com/forum/145493/re-optimize-your-vintage-content-material-and-pressure-more-site-visitors), [including pictures](https://www.mindstick.com/forum/160679/how-to-set-image-on-page-in-html), [audio](https://www.mindstick.com/articles/576/audio-element-in-html5), and [video](https://www.mindstick.com/blog/304318/how-to-use-html-video-tag), 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](https://yourviews.mindstick.com/view/84229/a-new-alternative-to-outsourcing-the-extended-team-model) text for the image if it [cannot be displayed](https://answers.mindstick.com/qa/95308/how-can-i-open-a-telegram-channel-that-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:

```html
<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:

```html
<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](https://www.mindstick.com/blog/304318/how-to-use-html-video-tag).

## Attributes:

- **src**: Specifies the URL of the [video file](https://answers.mindstick.com/qa/94846/why-can-t-i-open-my-video-file-on-android).
- **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:

```html
<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:

```html
<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:

```html
<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](https://answers.mindstick.com/qa/112151/how-do-i-implement-responsive-images-to-cater-to-different-screen-sizes).

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

## Example:

```html
<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](https://answers.mindstick.com/qa/38931/who-has-won-the-2016-fifa-interactive-world-cup-fiwc) and engaging. By expertise and utilizing those tags, web builders can create rich, multimedia-pushed websites.

---

Original Source: https://www.mindstick.com/articles/336032/explain-the-use-and-concept-of-media-tags-in-html-with-examples

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.