Top New Features of HTML5 with Examples

ADMEC Multimedia > Web Design > Top New Features of HTML5 with Examples

This enterprise moves fast—definitely fast! if you’re no longer cautious, you will be left in its dirt. So, in case you’re feeling a chunk overwhelmed with the coming adjustments/ updates in HTML5, use this as a primer of the stuff you ought to realize.

Before browsing by those techniques, have an examine our HTML5 Templates, as a first-class subject is probably an amazing option for your subsequent challenge.

You could get assistance from ADMEC Multimedia Institute by joining advanced HTML & CSS course that will impart you live project training on primary aspects, which includes customization of HTML5 templates a latest version of the HTML language. HTML5 is introduced with new features. This version was released in October of 2014. 

New features of HTML5

1. Video and Audio

Video and audio are the new tags which allow to embed a video in the website. YouTube also declare video embed by giving the code to embed for their videos. It helps the web to be more involved with multimedia. A new tag is also available in HTML5 and that is audio tag. Which is used to embed any audion in the web.

Example of using Video tag

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

Example of using Audio tag

<audio autoplay="autoplay" controls="controls">
 <source src="file.ogg" />
    <source src="file.mp3" />
    <a>Download this file.</a>
</audio> 

2. nav

The nav element is used for the part of a internet site that links to different pages at the website. The hyperlinks can be organized a number of approaches. below, the hyperlinks are displayed inside paragraph factors. An unordered list can also be used.

<nav>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a>
  <a href="/jquery/">jQuery</a>
</nav>

3. header

The header element can be used to institution collectively introductory factors on a website, such as a business enterprise brand, navigation objects, and occasionally, a search form.

<header>
  <img src="company-logo.png">
  <nav>
    <p><a href="login.html">Log In</a></p>
    <p><a href="signup.html">Sign Up</a></p>
    <p><a href="contact.html">Contact Us</a></p>
  </nav>
</header>

4. canvas

canvas is a tag of HTML which is newly introduced in HTML5. It is used to draw the images on the fly. It can be used for visual images, rendering graphs, game graphics.

Example of canvas

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

5. footer

Footer is a tag, used to define the footer of a document or a section. Usually it contains the information about author and copyright etc. Address tag may be used to mark up the contact information in the footer.

A document or section can have more than one footer.                            

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

6. New types for input tags

input is an attribute which is an old attribute but in HTML, it is reintroduced with new values like email, month, number, range, search, tel, color, week, url, time, date, datetime-local etc.These are the new values which can be contain by the input tag.

  • ContentEditable

It is an attribute which is used to permit the user to edit the content. It creates What You See What You Get so easy. Content will be editable by clicking on it.

  • Progress

This tag is used to check the progress of a task during execution of that. Progress tag can used with the conjuction of JavaScript. It is like progress bar.

<progress value="22" max="100"></progress>
  • section

Section tag is used to divide a document or in parts or sections. For example: An article can have many sections like header, footer, latest news and section for main content etc.

  • main

main is a tag which is used to contain the main content of the page. More than one main tag is not accepted in the document and this tag can not be inside in article, aside, footer, header tags. It does not include the navigation bar, header and footer.

These are some of the new features which are introduced in the HTML5 version. There are many more features of HTML5 which are newly introduced. Features of HTML5 is supported by the latest versions of browsers. You can go through our all HTML blogs page to read more informative blogs related to website designing. 

Leave a Reply

Related Posts

Copy link
Powered by Social Snap