As we all know HTML5 is providing lots of new features that Web didn’t see before. There are 7 HTML5 tags you must know to use in your next project. These elements are of type – “EMBED” tags.

 I will walk you through the tags that can be used to embed audio, video and more along with Demos. 

Let’s begin!

1. <time>

The <time> element is used to define a specific time or date. The datetime attribute in <time> HTML5 tag translates date or time into a machine readable format allowing browsers to offer better search results and to provide custom features like event reminders for birthday, anniversary, etc.

Just note that start and end tags are mandatory.

Code
<p>Everyday school bus comes at <time>8:00</time> am</p>
<p>The winter festival starts from <time datetime="2020-11-28 20:00">28 Nov</time>.</p>

Demo:

Everyday school bus comes at am

The winter festival starts from .

2. <figure>

The <figure> element is used to mark up an image, illustration, diagram, code snippet, etc.

Just note that start and end tags are mandatory.

Code
<figure>
  <img src="https://programmerguru.com/wp-content/uploads/2020/10/beautiful_fall_picture.jpg" alt="Beautiful fall picture" style="width: 100%" />
</figure>
Photo by Chris Lawton on Unsplash

Demo:

Beautiful fall picture

3. <figcaption>

The <figcaption> is used to define a caption for figure element. Although it is an optional tag using it with an image makes more sense than without one. Start and end tags are mandatory.

Code
<figure>
  <img src="https://programmerguru.com/wp-content/uploads/2020/10/beautiful_fall_picture.jpg" alt="" style="width: 100%;" />
  <figcaption> This photo was taken in Autumn season.</figcaption>
</figure>

Photo by Chris Lawton on Unsplash

Demo:

 This photo was taken in Autumn season.

4. <audio>

The <audio> element is used to embed sound content in a document without depending on any plugins like flash. Start and end tags are mandatory..

Code
<audio controls>
   <source src="morning_bliss.mp3" type="audio/mpeg">  
   This browser does not support the HTML5 audio element.
</audio>

Demo:

5. <video>

The <video> element is used to embed video content in a document without depending on any plugins like flash. Start and end tags are mandatory.

Code
<video width="250" height="150" controls>
  <source src="weaver.mp3" type="video/mp4"> 
  This browser does not support the HTML5 video element.
</video>

Demo:

6. <source>

The <source> element specifies multiple media resources for <audio>, <video>, etc. Using multiple sources allows the browser to choose the most suitable one. Only start tag is required and there is no end tag.

Code
 <audio controls>
  <source src="morning_bliss.ogg" type="audio/ogg">
  <source src="morning_bliss.mp3" type="audio/mpeg">
  Your browser does not support the HTML5 audio element.
 </audio>

7. <svg>

The <svg> element is used to embed Scalable Vector Graphics in an HTML document.
SVG can be commonly used in drawing shapes like cirlce, rectangle, etc. Start and end tags are mandatory.

Code
<svg>
  <rect width="200" height="100" stroke="red" stroke-width="4" fill="green">
  Your browser does not support SVG.
</svg>

Demo:

Your browser does not support SVG.

Hope you find this article on HTML5 is useful. Please let me know if you got any questions or need more information on this post in the comments section down below.

Happy learning! 

Join the Newsletter

Subscribe to get our latest content by email.
    We won't send you spam. Unsubscribe at any time.