Detect HTML5 usage
If you want to see that a website is using HTML5 elements or not, you only need to view the source of the website.
If the source code starts with the following declaration.
<!DOCTYPE HTML>
Then, website was marked up with HTML5.
By using the HTML5 DocType, you can let the browser know what to expect from your document.HTML4 required a DocType reference to a DTD (doc type declaration), and there were three different DTD’s that could be used but HTML5 doesn’t require such a reference.
Remove Internet Explorer HTML5 Compatibility Issues
Microsoft IE9 supports HTML5, but there are still so many people using MSIE 7 and 8 and even MSIE 6.Add below HTML5 enabling script to allow developers to use any HTML5 element on their page. It should place within the <HEAD> tags, and is referenced like this:
<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
HTML5 Element Detection Techniques
When browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. Every html element is represented in the DOM by a different object. (There are also global objects, like window and document, that aren’t tied to specific elements.)
All DOM objects share a set of common properties, but some objects have more than others. In browsers that support HTML5 features, certain objects will have unique properties. Let’s discuss, which features are supported.
There are four basic techniques can be used to detect whether a browser supports a particular feature or not.
1.Check if a certain property exists on a global object (such as window or navigator).
E.g: test for geolocation support
2.Create an element, and then check if a certain property exists on that element.
E.g: test for canvas support
3.Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
E.g: test which video formats are supported
4.Create an element, set a property to a certain value, and then check if the property has retained its value.
E.g: test which <input> types are supported
Modernizr can be used to detect these easily as
Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. You should always use the latest version of this. To use it, include the following <script> element at the top of your page.
<script src=”modernizr.min.js”></script>
HTML5 Form Enhancements (New elements)
Autofocus Using HTML5
<input id=”example” name=”example” type=”text” autofocus />
Placeholders Using HTML5
<input id=”example1″ name=”example1″ type=”text” placeholder=”Your Text” />
Editable Content Using HTML5’s contenteditable
<p contenteditable=”true”>Put your mouse pointer in this text and you can update it!</p>
Also, it has also introduced some new elements as below:
<article>
<aside>
<audio>
<canvas>
<command>
<datagrid>
<details>
<dialog>
<figure>
<footer>
<header>
<m>
<meter>
<nav>
<output>
<progress>
<section>
<source>
<time>
<video>
HTML5 also defines new input types that you can use in your forms.
<input type=”search”> for search box
<input type=”date”> for calendar date picker
<input type=”month”> for month
<input type=”week”> for week
<input type=”time”> for timestamp
<input type=”datetime”> for precise, absolute date+time stamp
<input type=”datetime-local”> for local dates and time
<input type=”number”> for spinbox
<input type=”range”> for slider
<input type=”color”> for color picker
<input type=”tel”> for telephone number
<input type=”url”> for web address
<input type=”email”> for email address
