## HTML `` `type` Attribute
The `type` attribute of the `` element specifies the MIME type (Multipurpose Internet Mail Extensions) of the linked media resource.
Providing the `type` attribute is highly recommended because it allows the browser to quickly determine if it supports the media format before downloading it. If the browser does not support the specified type, it can skip the file immediately and move to the next `` element, saving bandwidth and improving page performance.
---
## Browser Support
The `type` attribute is widely supported by all modern web browsers:
* Google Chrome
* Mozilla Firefox
* Safari
* Microsoft Edge
* Opera
*Note: Internet Explorer 8 and earlier versions do not support the `` tag.*
---
## Syntax
```html
```
### Attribute Values
| Value | Description |
| :--- | :--- |
| `MIME_type` | Specifies the MIME type of the media resource. |
### Common Media MIME Types
When working with audio and video elements, the following MIME types are most commonly used:
#### Video Formats
* `video/mp4` (MP4 video)
* `video/webm` (WebM video)
* `video/ogg` (Ogg video)
#### Audio Formats
* `audio/mpeg` (MP3 audio)
* `audio/ogg` (Ogg audio)
* `audio/wav` (WAV audio)
#### Image Formats (Used inside ``)
* `image/webp` (WebP image)
* `image/avif` (AVIF image)
* `image/png` (PNG image)
*For a complete list of standard MIME types, please refer to the (https://www.iana.org/assignments/media-types/).*
---
## Code Examples
### Example 1: Audio Element with Multiple Sources
In this example, the browser will check the `type` attribute. If it supports `audio/ogg`, it will play `horse.ogg`. Otherwise, it will fall back to `horse.mp3`.
```html
```
### Example 2: Video Element with Multiple Sources
Using the `type` attribute ensures the browser only downloads the video file format it is capable of rendering.
```html
```
### Example 3: Responsive Images with ``
The `` tag is also used inside the `` element to serve modern, highly-compressed image formats like WebP or AVIF, falling back to standard formats like JPEG or PNG if unsupported.
```html
```
---
## Important Considerations
1. **Performance Optimization**: Always include the `type` attribute. Without it, the browser must fetch the beginning of the media file over the network to inspect its headers and determine if it can play it. This causes unnecessary network requests and delays playback.
2. **Codecs Parameter**: You can specify the exact audio/video codecs within the `type` attribute for even better browser compatibility matching. For example:
* `type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'`
* `type='video/webm; codecs="vp8, vorbis"'`
YouTip