The Media Tag Group is a group of tags that help with creating multi-media experiences on a web page.
Media group tags include <audio>, <video>, <iframe>, <source>, and others.
With increasing bandwidths, multi-media is becoming very important in web development.
Fortunately, HTML supports powerful media controls that can be placed directly on a page.
These include: images, animations, audio, and video.
Here is a list of media tags that are available to design media-rich pages.
| Element | Description |
|---|---|
| <audio> | Creates a player for sound such as music, sound effects, or others |
| <video> | Creates a video player on a page |
| <source> | Adds a media source for a <video>, <audio>, or <picture> |
| <track> | Adds a text track, such as, subtitles and captions, to the media |
| <embed> | Creates a container for an external resource |
| <iframe> | Creates a frame in which another web page can be embedded |
| <svg> | Displays an scalable vector image |
| <canvas> | Creates a graphics container where JavaScript can draw |
| <img> | Displays an image |
| <area> | Specifies a map area for an image |
| <map> | Defines a client-side image map, i.e. an image with clickable areas |
| <figure> | Displays self-contained content, usually an image |
| <figcaption> | Adds a caption to a <figure> (image) element |
A music selection page created with various media tags.
Music courtesy: https://audionautix.com
<h5>Select your favorite music</h5>
<figure>
<img src="/img/html/media-pop.png" alt="Pop music">
<figcaption>Title: Groovy Baby.</figcaption>
</figure>
<audio controls>
<source src="/media/groovy-baby.mp3" type="audio/mpeg">
</audio>
<br /><br />
<br /><br />
<figure>
<img src="/img/html/media-dance.png" alt="Dance music">
<figcaption>Title: Forest Rythm.</figcaption>
</figure>
<audio controls>
<source src="/media/forest-rythm.mp3" type="audio/mpeg">
</audio>
<br /><br />
<br /><br />
<figure>
<img src="/img/html/media-blues.png" alt="Blues music">
<figcaption>Title: Ophelieas Blues.</figcaption>
</figure>
<audio controls>
<source src="/media/ophelieas-blues.mp3" type="audio/mpeg">
</audio>
<p>
Music courtesy: https://audionautix.com
</p>
The <figure> and <figcaption> tags display the images and their titles.
The <audio> tags create audio players with full media controls.
In summary, the media players offer great power with minimal HTML.
Using DOM APIs you can control exactly when and how media files are played.
Combined with interactive visuals, such as, canvas, and svg, it is possible to create truly immersive media experiences (tip: it does require programming skills).
To explore a multimedia solution in HTML follow this link to codepen.io.
