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.
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
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>
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
<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
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>
Embedding video is actually pretty similar to audio. Use a
video tag and give it a
<video src="video.mp4">This browser does not support this tag.</video>
You have the same attributes available when using the
In addition, you have the optional
height attributes to control the size, and the option to mute the video via the
mute attribute. If you want to display an image before the video is played, you can do so with the
<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>
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.