Top New Features of HTML5 With Examples


Web dialects need normal updates so as to remain current and tackle new issues looked by web engineers. HTML5 is the most recent variant of HTML. The following are some HTML5 highlights you will experience as you learn with Web design course.

New features of HTML5


The video element allows you to easily stream video from a website.

<video width=”450px” height=”350px” controls>

  <source src=”video-url.mp4″ type=”video/mp4″>


In the HTML above, width and height set the dimensions for the videoelement. The controls attribute creates playback buttons such as “Play” and “Pause”. The source src tag provides the URL where the video is hosted and type specifies the video’s type, in this case, “video/mp4”.


Section elements, like divs, can be used to organize webpage content into thematic groups.

<section class=”contact-form”> 

<h2>Contact Us</h2> 

<form> .. </form>


Above, a section element is used to organize h2 and form elements for a website’s “Contact Us” feature.


The nav element is used for the part of a website that links to other pages on the site. The links can be organized a number of ways. Below, the links are displayed within paragraph elements. An unordered list could also be used.



<a href=”login.html”>Log In</a>





The header element can be used to group together introductory elements on a website, such as a company logo, navigation items, and sometimes, a search form.


<img src=”company-logo.png”> 


<p><a href=”login.html”>Log In</a></p>   




Above, the header element encloses the img and nav.


The footer element is typically found at the bottom or foot of a webpage. It can contain copyright information, links to social media and additional site navigation items.


<p>Acme Granola Corporation 2016<p> 

<div class=”social”>   

<a href=”#”><img src=”instagram-icon.png”></a>   





Figure elements can be used to display visual content, such as photos, illustrations, diagrams or code snippets.

<figure class=”gallery-item”> 

<img src=”image-1.png”></figure>


In the example code above, figure elements have the class “gallery-item”, and each contains an img element.

Above, between <footer> and </footer>, copyright information is contained in the p element, and social media links are contained within the div with class “social”.

You May Also Like

About the Author: webdesigning

Leave a Reply

Your email address will not be published. Required fields are marked *