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.
