In today’s competitive market every programming language should upgrade to compete in the market. So for the same HTML is now upgraded and added some beautiful HTML 5 Features.

Let’s start to have a look over new advanced HTML5 Features in this blog post.

Below are the HTML5 Features:-

Video Tag

Video is a newly introduced element in HTML 5 that allows you to stream videos directly on your website.

Let’s see the example that how you can use this video in your webpage. Later we haven’t video tag.

1
2
3
<video width="450px" height="350px" controls="">
  <source src="video-url.mp4" type="video/mp4">
</video>

In the above HTML 5 code, 

1
width
 and 
1
height
 are the two properties of video to set the dimensions for the 
1
video
 element. Another attribute is  
1
controls
 that helps to creates playback buttons such as “Play” and “Pause” on your video elements.

And the most important attribute source src tag where you have to give the URL or link of the video. And type the attribute specifies the types of video’s like “video/mp4”.

Figure tag

The figure element is also a newly introduced element in the HTML5 to display the visual content. Visual content maybe some graphics, photos, code snippets, etc.

Let’s see the example of the Figure element of HTML 5.

1
2
3
<figure>
  <img src="image-1.png">
</figure>

Header Tag

Every HTML page has 3 parts header, body, and footer. So to separate the introductory part from the main code header element is introduced in HTML 5. In introduction part we can say that like companies logo, site navbar, etc.

You can write Header Tag just before Body tag .

Let’s have a look over Header examples

1
2
3
4
5
6
7
<header>
  <img src="logo.png">
  <nav>
    <p><a href="login.html">Log In</a></p>
    <p><a href="contact.html">Contact Us</a></p>
  </nav>
</header>

Footer Tag

Just Like header element/tag in html5 there are also footer tag which is also an important HTML5 Features.

You can find the Footer tag below after the ending of the body tag. Basically these footer tags contain the social links of the website.

1
2
3
4
5
6
7
<footer>
  <div class="social">
    <a href="#"><img src="instagram-icon.png"></a>
    <a href="#"><img src="facebook-icon.png"></a>
    <a href="#"><img src="twitter-icon.png"></a>
  </div>
</footer>