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.