LanguagesTop 7 Features of HTML5

Top 7 Features of HTML5

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

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.

  1. Google Chrome 10.0 and above
  2. Firefox 4.0 and above
  3. Internet Explorer 8.0 and above

Top 7 Features

Multimedia Support

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

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.

  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.
</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 class="user" 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/>

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

Happy reading!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories