List of HTML5 new Tags introduced in 5th revision of HTML

HTML5 is the 5th Revision of Hypertext Markup Language. By simply adding <!DOCTYPE html> to our HTML file we can instruct the browser that this file is a HTML5 Document. Compare to older versions of HTML, HTML5 is rich with many new features. To design a web page more better HTML5 provides advanced Structural Elements. In form level HTML5 introduced 3 additional controls. HTML5 introduced several input types. In matter of Graphics & Media elements HTML5 is ultimate. To draw graphics HTML5 comes with Canvas & SVG. There are various media elements introduced in HTML5 to make Audio & Video integration easier. In below let us share the List of HTML5 new Tags.

Structural Tags

<header> – While Designing a HTML file header tag helps to define page header in a separate block.

<main> – In a HTML document main is the area in between header & footer. Main tag in HTML5 helps to design better structure of a HTML document.

<footer> – In a web page HTML footer tag helps to define page footer in a separate block.

<nav> – Nav element in HTML5 helps to define navigation links under a single tab.

<progress> – Progress tab act like an indication. If some job running in background using this control we can show how much work is in progress.

<mark> – Mark tag in HTML5 helps to Highlight text easily.

<meter> – Meter tag in HTML5 help to present scalar measurement within a known range.

<dialog> – Using dialog tag we can show popup like window in HTML5. Dialog tag supports Chrome version 37+, Safari 6+ & Opera 24+.

<article> – article tag defines an Article in the document. Using article tag we can categorized content area in a HTML file.

<aside> – aside tag defines content aside from body content.

<bdi> – bdi tag helps to identify text that might be formatted in a different direction from normal text.

<time> – time tag helps to specify date & time part in a HTML file.

<section> – To identify a particular section in a HTML document section tag is useful.

<wbr> – Defines a possible line-break.

New Form Tags

<datalist> – datalist tag helps to declare pre-defined options for HTML Input Control. Example shown below.

<input list="EmployeesName">
<datalist id="EmployeesName">
<option value="Biswabhusan Panda"></option>
<option value="Raghav Mishra"></option>
<option value="Rupak Srivastab"></option>
<option value="Binay Kumar Panda"></option>
<option value="Bijay Kapoor">
</option></datalist>

<keygen> – Keygen helps to generate strong Secured key in HTML5. Look at the example below how to use Keygen as a form element in HTML5.

<form action="example_keygen.asp" method="get">
Employee Name: <input type="text" name="empName">
Encryption: <keygen name="passcode">
<input type="submit">
</form>

<output> – output form element helps to render dynamic result in real-time operation. Example shown below.

<form oninput="outputval.value=parseInt(txtrangle.value)+parseInt(txtnumber.value)">0
<input type="range" id="txtrangle" value="70">100 + <input type="number" id="txtnumber" value="50">= <output name="outputval" for="txtrangle txtnumber"></output>
</form>

New Input Type Tags in HTML5

<input type="color">
<input type="date">
<input type="range">
<input type="search">
<input type="tel">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="time">
<input type="url">
<input type="week">
<input type="month">
<input type="number">

HTML5 Graphics

<canvas> – Canvas is a new HTML5 element to draw Graphics using Client Script. Read more about HTML5 Canvas.

<svg> – HTML5 Supports SVG. svg tag helps to draw graphics using SVG.

Media Tags in HTML5

<audio> – Using audio tag in HTML5 we can define music.

<video> – Using video tag in HTML5 we can define movie.

<embed> – embed tag act like a plugin. Using embed tag we can integrate external application to HTML5 document.

<source> – source tag helps to declare file path for audio or video elements.

<track> – Defines tracks for video & audio.