Syntax
<audio src="song.mp3" controls></audio>Examples
Basic Audio Player
An audio player with standard controls.
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>Multiple Format Fallback
Providing both MP3 and OGG formats for compatibility.
<audio controls>
<source src="track.ogg" type="audio/ogg">
<source src="track.mp3" type="audio/mpeg">
</audio>Looping Sound Effect
A muted-by-default, loopable audio clip.
<audio id="notification" src="ding.mp3" preload="auto"></audio>
<button onclick="document.getElementById('notification').play()">Play Sound</button>Attributes
- controls (boolean): Shows the browser's built-in playback controls
- autoplay (boolean): Starts playback automatically (subject to browser autoplay restrictions)
- loop (boolean): Restarts playback automatically when it ends
- preload (none | metadata | auto): Hints how much of the file to preload before playback
Best practices
- Always show controls unless the audio is purely decorative (like a UI sound effect triggered by JavaScript)
- Provide MP3 and OGG sources together for the widest browser compatibility
- Be mindful of autoplay — most browsers block auto-playing audio with sound unless the user has interacted with the page
- Use preload="none" for pages with many audio elements to avoid unnecessary bandwidth usage
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<img>
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<iframe>
The <iframe> element embeds another HTML document within the current page, creating a nested browsing context. It is commonly used for embedding maps, videos from external platforms, payment widgets, or ads. Because it loads content from potentially untrusted sources, the sandbox attribute is important for restricting what an embedded page is allowed to do.
The <img> element embeds images into web pages. Images enhance visual communication and user engagement. The src attribute specifies the image source, while alt provides alternative text for accessibility and SEO. Images are inline-replaced elements, meaning they display in the flow of text but are replaced with the actual image content.<figure>, <figcaption>
The <figure> element wraps self-contained content — typically an image, illustration, diagram, code snippet, or chart — along with an optional caption provided by <figcaption>. Content in a figure is meant to be referenceable independently of the main flow; a reader should be able to move it elsewhere on the page (or even to an appendix) without breaking the document's meaning.<video>
The <video> element embeds video content directly in a web page without needing a third-party plugin. It supports built-in playback controls, multiple source formats via nested <source> elements for browser compatibility, and various attributes for controlling autoplay, looping, and muting.<iframe>
The <iframe> element embeds another HTML document within the current page, creating a nested browsing context. It is commonly used for embedding maps, videos from external platforms, payment widgets, or ads. Because it loads content from potentially untrusted sources, the sandbox attribute is important for restricting what an embedded page is allowed to do.