Clean • Professional
HTML multimedia elements allow us to add audio, video, animations, and interactive graphics to webpages. These features make websites more engaging, user-friendly, and modern.
<audio>)The <audio> tag is used to embed sound files (music, podcasts, voice recordings) in a webpage.
Basic Syntax:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Attributes of <audio>:
controls → Displays play, pause, and volume controls.autoplay → Plays audio automatically when the page loads.loop → Repeats audio continuously.muted → Starts audio in muted mode.<video>)The <video> tag is used to embed videos directly into a webpage.
Basic Syntax:
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Attributes of <video>:
controls → Adds video controls (play, pause, volume).autoplay → Plays video automatically (use with muted for SEO).loop → Repeats the video continuously.poster → Adds a thumbnail image before video plays.muted → Starts video with no sound.Subtitles & Captions (<track>):
Improves accessibility for hearing-impaired users.
Basic Syntax:
<video width="560" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
Lazy Loading Media:
Reduces page load time by loading media only when visible.
<video src="video.mp4" controls loading="lazy" width="560"></video>