The modern web today is a mature (but still always evolving) platform that allows you to do a lot of interesting things to build the experience you want thanks to newer HTML tags. This includes embedding cool things like audio, video and canvases onto your page.
Audio
To embed an audio file on your page, use the audio tag. This tags has four main attributes, with the most important being the source of your audio file, the src attribute.
You can display a message to the user in case the audio file failed to embed inside the opening and closing tags.
<audio src="music.mp3">This browser does not support this tag.</audio>
The controls attribute displays basic controls like play, pause and volume. The autoplay attribute will make the audio to play automatically.
If you would like the audio file to loop endlessly, add the loop attribute.
<audio src="music.mp3" controls autoplay loop>This browser does not support this tag.</audio>
If you would like to provide multiple file formats for the browser to select the best one, you can use the source tag with a src and type attribute, like so:
<audio controls autoplay loop>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
<source src="music.wav" type="audio/wav">
<p>This browser does not support this tag.</p>
</audio>
Video
Embedding video is actually pretty similar to audio. Use a video tag and give it a src attribute.
<video src="video.mp4">This browser does not support this tag.</video>
You have the same attributes available when using the audio tag.
In addition, you have the optional width and height attributes to control the size, and the option to mute the video via the muted attribute. If you want to display an image before the video is played, you can do so with the poster attribute.
<video width="640" height="480" poster="video_image.png" controls autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<p>This browser does not support this tag.</p>
</video>
Canvas
The canvas is an element that you can use to draw graphics, images, graphs, and many other things onto. A canvas, created using the canvas tag, only represents the container for where the graphics will be drawn.
<canvas width="400" height="200">
</canvas>
Up next, miscellaneous tags! You know, the tags that exist but people rarely show love to them. We're going to shed some light on them so that you can make the informed decision to use them or not.
