Top 7 Features of HTML5

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

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 data-domain="Technology" data-language="C#">
</span>

Editable Contents

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/>