HTML <video> tag 17/06/24, 1:04 PM
Save and open in Evernote
Last updated: Jun 3, 2024
HTML <video> tag
Overview
The <video> tag is used to embed video content in a webpage.
It is a block-level element. (two elements always separated by a new line)
The video element is supported by all modern browsers.
Basic Syntax
<video src="video.mp4" controls></video>
Attributes
1. src
Specifies the URL of the video file.
Example: src="video.mp4"
2. controls
Adds video controls (play, pause, volume).
Example: controls
3. autoplay
The video starts playing as soon as it is ready.
Example: autoplay
4. loop
The video will start over again, every time it is finished.
Example: loop
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 1 of 8
HTML <video> tag 17/06/24, 1:04 PM
Example: loop
5. muted
The audio output of the video is muted.
Example: muted
6. poster
Specifies an image to be shown while the video is downloading or until the user
hits the play button.
Example: poster="poster.jpg"
7. width and height
Sets the width and height of the video player.
Example: width="640" height="360"
8. preload
Specifies if and how the author thinks that the video should be loaded when the
page loads.
Values: auto, metadata, none
Example: preload="metadata"
Example Usage
<video src="movie.mp4" width="640" height="360" controls>
Your browser does not support the video tag.
</video>
Multiple Sources
Use the <source> tag to specify multiple media resources for the video.
Helpful for providing different video formats for better compatibility.
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Fallback Content
Provide fallback content for browsers that do not support the <video> tag.
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 2 of 8
HTML <video> tag 17/06/24, 1:04 PM
Provide fallback content for browsers that do not support the <video> tag.
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p>Download the video
<a href="movie.mp4">here. </a>.
</p>
Accessibility
Use captions for accessibility with the <track> element.
Example for adding captions:
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Common Issues
Not all browsers support all video formats; providing multiple sources can help.
Autoplay may not work on mobile devices due to browser policies.
Best Practices
Always provide controls for user interaction.
Include multiple sources for broader compatibility.
Use the poster attribute to display a placeholder image.
Provide fallback content for non-supporting browsers.
Ensure accessibility with captions and subtitles.
By using these attributes and following best practices, you can effectively incorporate video
content into your web pages.
HTML <audio> Tag
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 3 of 8
HTML <video> tag 17/06/24, 1:04 PM
Overview
The <audio> tag is used to embed audio content in a webpage.
It is a block-level element.
The audio element is supported by all modern browsers.
Basic Syntax
<audio src="audio.mp3" controls></audio>
Attributes
1. src
Specifies the URL of the audio file.
Example: src="audio.mp3"
2. controls
Adds audio controls (play, pause, volume).
Example: controls
3. autoplay
The audio starts playing as soon as it is ready.
Example: autoplay
4. loop
The audio will start over again, every time it is finished.
Example: loop
5. muted
The audio output is muted.
Example: muted
6. preload
Specifies if and how the author thinks that the audio should be loaded when the
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 4 of 8
HTML <video> tag 17/06/24, 1:04 PM
Specifies if and how the author thinks that the audio should be loaded when the
page loads.
Values: auto, metadata, none
Example: preload="metadata"
Example Usage
<audio src="audio.mp3" controls>
Your browser does not support the audio element.
</audio>
Multiple Sources
Use the <source> tag to specify multiple media resources for the audio.
Helpful for providing different audio formats for better compatibility.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Fallback Content
Provide fallback content for browsers that do not support the <audio> tag.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<p>Download the audio
<a href="audio.mp3">here </a>.
</p>
Accessibility
Use captions or transcripts for accessibility.
Example for adding captions:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
<source src="audio.ogg" type="audio/ogg">
<track kind="captions" src="captions_en.vtt" srclang="en" label="English">
Your browser does not support the audio element.
</audio>
Common Issues
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 5 of 8
HTML <video> tag 17/06/24, 1:04 PM
Not all browsers support all audio formats; providing multiple sources can help.
Autoplay may not work on mobile devices due to browser policies.
Best Practices
Always provide controls for user interaction.
Include multiple sources for broader compatibility.
Provide fallback content for non-supporting browsers.
Ensure accessibility with captions and transcripts.
By using these attributes and following best practices, you can effectively incorporate audio
content into your web pages.
HTML <img> Tag Notes
Overview
The <img> tag is used to embed images in a webpage.
It is an inline element.
The image element is supported by all modern browsers.
Basic Syntax
<img src="image.jpg" alt="Description of image">
Attributes
1. src
Specifies the URL of the image file.
Example: src="image.jpg"
2. alt
Provides alternative text for the image if it cannot be displayed.
Example: alt="Description of image"
3. width and height
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 6 of 8
HTML <video> tag 17/06/24, 1:04 PM
Sets the width and height of the image.
Example: width="600" height="400"
4. title
Provides additional information about the image, typically displayed as a tooltip
when the user hovers over the image.
Example: title="Tooltip text"
5. srcset
Specifies a set of images to be used for different screen sizes or resolutions.
Example: srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg
1200w"
6. sizes
Specifies how the browser should choose the appropriate image size for
different viewport sizes.
Example: sizes="(max-width: 600px) 480px, 800px"
7. loading
Specifies whether the image should be loaded immediately or deferred until it is
near the viewport.
Values: eager, lazy
Example: loading="lazy"
Example Usage
<img src="image.jpg" alt="Beautiful landscape" width="600" height="400">
Responsive Images
Use the srcset and sizes attributes to provide different images for different screen
sizes.
<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-
1200.jpg 1200w" sizes="(max-width: 600px) 480px, 800px" alt="Beautiful
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 7 of 8
HTML <video> tag 17/06/24, 1:04 PM
1200.jpg 1200w" sizes="(max-width: 600px) 480px, 800px" alt="Beautiful
landscape">
Accessibility
Always provide a meaningful alt attribute for screen readers.
Avoid using images of text. If text is necessary, use CSS or HTML text.
Common Issues
Broken links: Ensure the src attribute points to a valid image URL.
Missing alt text: Always provide alt text for accessibility.
Best Practices
Use responsive images with srcset and sizes for optimal performance.
Always provide alt text for accessibility.
Use loading="lazy" for better performance on pages with many images.
Provide meaningful title attributes if additional information is needed.
By using these attributes and following best practices, you can effectively incorporate image
Terms of Service Privacy Policy Report Spam
https://www.evernote.com/shard/s406/client/snv?isnewsnv=true…0mkGt8P387TN1JQMIPtySkBlQ&title=HTML%2B%253Cvideo%253E%2Btag Page 8 of 8
