Top 7 Features of HTML5

By Arun Karthick | Posted 2015-09-17 | Send Email

1 of

Top 7 Features of HTML5

New HMTL5 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.
1. Tel
2. url
3. email
4. color
5. datetime
```
<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.
```
HTML5 Custom Data Attributes
HTML5 now allows you to add valid data attributes, which helps in storing the data without affecting the web page UI. These data attributes can be added in a hidden manner from the user and can be later used by JQuery or your JavaScript functions. In order to make your custom data attribute valid, the attribute should be prefixed with the word "data".
```
<span class="user" data-domain="Technology" data-language="C#">
</span>
```
Editable Contents in HTML5
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.
HTML5 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 in HTML5
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/>
```
Conclusion

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 cover in other articles. Please make use of the comments section to let me know whether you agree with my top 7 features list or not.
View All Slideshows >

Introduction

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.

Browser Compatibility

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

0 Comments (click to add your comment)

Comment and Contribute

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.

Top 7 Features of HTML5

Top 7 Features of HTML5

Multimedia Support in HTML5

Video & Audio:

New HMTL5 Input Element Types

Canvas in HTML5

HTML5 Custom Data Attributes

Editable Contents in HTML5

HTML5 Autofocus and Placeholder Attributes

Required Field and Range Validators in HTML5

Conclusion

Enterprise Development Update

Most Popular Developer Stories

Most Commented On