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