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

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.

HTML5 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 in HTML5

<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 value="Raghav Mishra">
<option value="Rupak Srivastab">
<option value="Binay Kumar Panda">
<option value="Bijay Kapoor">
</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.

Source of Image: http://www.ambab.com