HTML5 is the 5th Revision of Hypertext Markup Language. By simply adding 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.
Types and List of HTML5 new Tags
In below let us share the List of HTML5 new Tags.
Structural Tags in HTML5
header – While Designing a HTML file header tag helps to define page header in a separate block. Codes related to header pan you can keep inside this tag. Using structural tag is a best practice of HTML5 programmer.
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. Codes for site footer panel you can keep inside footer tag. This programming practice makes debugging easier.
nav – Nav element in HTML5 helps to define navigation links under a single tab. This tag generally we use to create navigation menus in our apps. Using CSS we can optimize nav menus as per the need.
<nav> <a href="/photoshop/">Adobe Photoshop</a> | <a href="/ajax/">AJAX</a> | <a href="/ds/">Data Structure</a> | <a href="/python/">Python</a> | <a href="/digitalmarketing/">Digital Marketing</a> </nav>
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. It appears in percentage to end-user.
mark – Mark tag in HTML5 helps to Highlight text easily.
meter – Meter tag in HTML5 help to present scalar measurement within a known range.
<label for="disk_d">Disk usage D:</label> <meter id="disk_d" value="2" min="0" max="10">2/10</meter>
dialog – Using dialog tag we can show popup like window in HTML5. Dialog tag supports Chrome version 37+, Safari 6+ & Opera 24+. Using open property of dialog tag you can show the dialog after page load.
<dialog open>This is an open dialog window</dialog>
article – article tag defines an Article in the document. Using article tag we can categorized content area in a HTML file.
<article> <h2>Digital Marketing</h2> <p>Digital Marketing comes with SEM, SMM, Blog Commenting, Forum Posting and Link building.</p> </article>
aside – aside tag defines content aside from body content. Normally we use this tag to place images or videos aside to text.
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.
<time datetime="2009-01-01 20:00">New Year</time>
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. Using this control you can make your textbox like auto-search option of google. 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="Sonam Sinha"> <option value="Rani Mukharjee"> <option value="Muhmmad Abid"> <option value="Swapna Roy"> <option value="Megha Badajena"> </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
Looking into the demand HTML5 comes with many new elements. From a telephone number to date and time all can be handeled using various types of HTML5 input tags. Some of them are preseting below.
<input type="color" id="txtColor"> <input type="date" id="txtDated"> <input type="range" id="txtRange"> <input type="search" id="txtSearch"> <input type="tel" id="txtTelephone"> <input type="datetime" id="txtDatetime"> <input type="datetime-local" id="txtLocal"> <input type="email" id="txtEmail"> <input type="time" id="txtTime"> <input type="url" id="txtUrl"> <input type="week" id="txtWeek"> <input type="month" id="txtMonth"> <input type="number" id="txtNumber">
HTML5 Graphics Elements
canvas – Canvas is a new HTML5 element to draw Graphics using Client Script. Read more about HTML5 Canvas.
<canvas id="demoCanvas">
Your browser does not support the canvas tag.
</canvas>
<script>
let canvas = document.getElementById("demoCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF6600";
ctx.fillRect(0, 0, 80, 80);
</script>
svg – HTML5 Supports SVG. svg tag helps to draw graphics using SVG.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
Media Elements
audio – Using audio tag in HTML5 we can define music. HTML5 Audio tag supports ogg, mpeg audio formats. There are many option using which you can control your audio.
<audio src="jharaphula.wav" controls autoplay> Your browser does not support the HTML5 <audio> element. </audio>
video – Using video tag in HTML5 we can define movie. HTML5 Video tag supports ogg, mpeg video formats. Starting from play to rewind or forward you have several properties with HTML5 video tag, using which you can implement a video player if needed.
<video src = "jharaphula.mp4" width="340" height="220" controls> Your browser does not support the HTML5 <video> element. </video>
embed – embed tag act like a plugin. Using embed tag we can integrate external application to HTML5 document. embed tag help to integrate youtube videos to our webpages.
source – source tag helps to declare file path for audio or video elements.
track – Defines tracks for video & audio.
