Top 7 Features of HTML5
In this article I will be covering what I think is the top 7 features of HTML5. HTML5 was introduced in order to support various features that the modern day websites require. As there are no major changes in the programming model of HTML, HTML5 is easy to adopt. HTML5 is also backward compatible. I mention it being backward compatible as HTML5 was designed in such a way that these constructs can be ignored by browsers that don't support them.
Below is a list of major browsers that support most of the HTML5 features. You should also note that not all of these browsers support all the HTML5 features.
- Google Chrome 10.0 and above
- Firefox 4.0 and above
- Internet Explorer 8.0 and above
Top 7 Features
Video & Audio:
<body> <video src="Video file path" controls> Text to be displayed when the browser doesn't support the video goes here. </video> <audio src="location of the audio" controls> Text to be displayed when the browser doesn't support the audio goes here. </audio> </body>
New Input Element Types
Input elements play an important role in data driven web applications. The input types help in receiving the input in a required format. In HTML5 some new input types have been added. A few of the existing input types are password, file, etc. Below are a few of the important and useful new types introduced in HTML5 for an input HTML control.
<input id="EmailIdInput" type="email" />
Canvas in HTML5
Canvas is a rectangular area, which allows pixel level operations like drawing a line, box, circle, performing graphics, etc. Now HTML5 offers support for canvas areas. Shown below is a sample code.
<canvas id="myCanvas" width="200" height="100"> Fallback content, when canvas is not supported by the browser. </canvas>
Custom Data Attributes
<span class="user" data-domain="Technology" data-language="C#"> </span>
This is a nice feature, which allows the end users to edit the HTML control's content. This kind of feature allows the developers to build web pages that include sections like notes, HTML editor etc. All you need to do is add an attribute named contentEditable="true" to the HTML control.
<p contenteditable="true">Click here to edit this content!</p>
This feature comes in really handy when it is combined with another feature called offline storage. The topic about the offline storage will be covered in a future article.
Autofocus and Placeholder Attributes
The autofocus feature is achieved by adding the autofocus attribute. This allows the control to have the focus automatically on page load.
<button id="SubmitButton" autofocus></button>
Placeholder is a feature supported for input fields by adding the attribute placeholder. This feature displays the value provided for the placeholder attribute, like a water mark, until the focus is moved to the input control.
<input type="email" name="EmailTextBox" placeholder="Please enter email here..."/>
Required Field and Range Validators
Required field functionality is achieved using the attribute named "required" on the input controls. This makes sure that the form will not be posted until the value is entered for the input control.
<input type="email" name="EmailTextBox" required/>
Range validation is achieved through specifying the min and max values for the input control along with a valid type. This makes sure that the form will not be posted until the value entered for the input control is within the range.
<input type="number" name="NumberOfItems" min="10" max="50" required/>
I hope this article rightly lists out the top 7 features of HTML5. This list is fully based on my thoughts about the HTML5 features. HTML5 has many more exciting features, which I will be covering in forth-coming articles. Please make use of the comments section to let me know whether you agree with my top 7 features list or not.