HTML Media Tag Group

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.

HTML Reference

Creating Media Experiences

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.


Media Tags

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

Example

#

A music selection page created with various media tags.

Select your favorite music
Pop music
Title: Groovy Baby.




Dance music
Title: Forest Rythm.




Blues music
Title: Ophelieas Blues.

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>

Code explanation

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.


Did you know?

Did you know?

Audio and video players have versatile APIs

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.


You may also like

 Back to Tag Groups


Guides