Top Features of HTML5

Introduction to HTML5

It will be covering the top 7 features of HTML5. HTML5(hypertext markup language) was introduced in order to support various features that the modern day websites require.It was specially designed to deliver rich content without the need for additional plugins. The new version of HTML5 delivers everything from music to movies,animation to graphics, and it can also be used to build complicated web applications.HTML5 is also backward compatible. The backward compatible as HTML5 was designed in such a way that these constructs can be ignored by browsers that don’t support them.

HTML5 Features

Multimedia Support

First and foremost feature is the support of multimedia in HTML5. Yes HTML5 supports both video and audio files to be played in a browser. Below give the sample syntax to play audio and video files respectively.

<video width="300" height="150" src="Video file path" controls="controls">
     The given text to be displayed when the browser doesn't support the video goes here.
</video> <audio src="audio file path" controls="controls">
    The given text to be displayed when the browser doesn't support the audio goes here.
</audio>

New Input Element Types

Input elements play an important role in data driven Web Applications. The input types are help in receiving the input in a required format. In HTML5 added some new input types . A few of the existing input types are file, password, etc. Below are a few of the important and useful new types introduced in HTML5 for an input HTML control.

• Tel

• url

• email

• color

• datetime

<input id="email id" type="email" />

Canvas in HTML5

Canvas is a rectangular area, which allows pixel level operations like drawing a line, performing graphics, box, circle, etc. Now HTML5 offers support for canvas areas. Shown below is a sample code for canvas.

<canvas id="my canvas id name" width="150" height="100">
 when canvas is not supported by the browser this text will be display.
</canvas>

Custom Data Attributes

HTML5 now allows you to add valid data attributes, it helps in storing the data without affecting the web page User Interface. These data attributes can be added in a hidden manner from the user and can be later used by JQuery or your JavaScript(JS) functions. In order to make your custom data attribute valid, the attribute must be prefixed with the word “data”.

<span class="user" data-domain="Technology" data-language="C#">
</span>

Editable Contents

This is a nice feature, which allows the end users to edit the HTML5 control’s content. This type of feature allows the developers to build web pages that include sections like notes, HTML5 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>

Autofocus and Placeholder Attributes

The autofocus feature is achieved by adding the autofocus attribute. It allows the control to have the focus automatically on page load.

<button id="Submit" autofocus></button>

Placeholder is a feature supported for input fields by adding the placeholder attribute. This feature displays the value provided for the placeholder attribute, like a water mark, until the focus are moved to the input control.

<input type="email" name="EmailTextBox" placeholder="Enter email here..."/>

Required Field and Range Validators

Required field functionality is achieved using the attribute named “required” on the input controls. It makes sure that the form will not be posted until the value is entered for the input control.

<input type="email" name="Emailtext" required/>

Range validation is achieved through specifying the min and max values for the input control along with a valid type. It 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="5" max="30" required/>