After a long stay in draft stage, HTML5 has reached the official Recommendation stage, meaning the W3C finally completed it as an official standard, even as the most of the features are already implemented by the browser. HTML is mainly developed by WHATWG group (whatwg.org).
It took too long in the whole standardization process. The First Public Working Draft of HTML5 was published on 22 January 2008. Browsers also started implementing the specifications despite the whole specification not yet reached to the final Recommendation status.
HTML5 has introduced several new elements, input types and attributes in existing elements from HTML4.
New simple document type declaration
You can tell browser that your webpage is actually an HTML5 page by adding a very simple document type in compare to document type declarations of previous versions.
New Elements introduced in HTML5
There are around 25 new elements introduced in HTML5 to make your webpage more realistic. A complete list of new elements added in HTML5 can be seen in W3C specifications here at
Play media without using Flash player
Before HTML5, there was no standard for playing audio and video files on a web page. Audio and Video files could only be played with a plug-in (like flash).
You can now add an audio player using following tag.
<audio src=”http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg” autoplay>
Your browser does not support the <code>audio</code> element.
And a video player can be added using following code.
<video src=”videofile.ogg” autoplay poster=”posterimage.jpg”>
Sorry, your browser doesn’t support embedded videos,
but don’t worry, you can <a href=”videofile.ogg”>download it</a>
and watch it with your favorite video player!
For a detailed description on what media types are supported and detailed configuration, go through the Mozilla’s developer documentation for Audio and Video.
Drawing on Canvas
Scalable Vector Graphics (SVG) support
In HTML5, you can embed SVG graphics directly with the help of HTML code. See below example:
<svg width=”300″ height=”200″>
<polygon points=”100,10 40,198 190,78 10,78 160,198″
We can create light-weight interactive graphics with the help of SVG. It is possible to attach events in SVG elements. Google Charts is one very good example of SVG graphics.
Mozilla provides very good documentation, tools and example for SVG. Check this URL https://developer.mozilla.org/en-US/docs/Web/SVG.
New Input types
HTML5 has introduced several new input types like email, color, URL, tel, date, datetime etc. Most of the popular browsers now have support for most of these new input types and continuously increasing support. Refer following table for form feature support or go to the W3schools.com documentation for this here at http://www.w3schools.com/html/html5_form_input_types.asp
In case, the input type you have used is not supported by the browser, it will behave as text type input.
Several new attributes are introduced in HTML5 in different elements. Some of them are described below
It is used to display text inside input elements if it is blank.
minlength and maxlength
Used to specify maximum and minimum width of the user input in input elements.
min and max
It is used to specify minimum and maximum numeric values for input of number type.
Developers can not add their own attributes by prefixing them with data- . HTML5 validator will not detect any of such attributes as invalid.
Checking for browser support (Can I Use ?)
If you want to check browser support for any of HTML and CSS feature. Go to caniuse.com. This website provides complete details of browser support with version, known issues and links to specifications etc.
Below picture demonstrates, how it present support data for CSS3 border-radius.