Top New Features of HTML5 With Examples

top-5-new-features-of-html

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

1.VIDEO

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″>

</video>

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”.

2.SECTION

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

<section class=”contact-form”> 

<h2>Contact Us</h2> 

<form> .. </form>

</section>

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

3.NAV

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.

<nav>

<p>

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

</p> 

</nav>

 

4.HEADER

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.

<header> 

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

<nav>   

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

</p> 

</nav>

</header>

Above, the header element encloses the img and nav.

5.FOOTER

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.

<footer> 

<p>Acme Granola Corporation 2016<p> 

<div class=”social”>   

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

</div>

</footer>

 

6.FIGURE

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>

</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 *