Introduction
As HTML5 becomes more and more common, it is important for web developers to know the main features and how to use them. HTML5 not only includes new markup elements but also APIs that can be consumed from the JavaScript code. If you are not familiar with HTML5 yet, it’s the right time to peek into some of the interesting features. To that end this article discusses some of the features of HTML5 that are worth knowing. Specifically you will learn about audio, video and canvas elements, new input types, miscellaneous form features and custom data attributes.
Note:
You will find that features such as Web Sockets and Web Storage are often included as HTML5 features. Although these features are commonly used in HTML5 applications they have their own separate specifications. Therefore, this article doesn’t touch upon these features.
Audio and Video Elements
HTML5 offers two elements, <audio> and <video>, for embedding audio and video files into a web page. That means instead of using some third-party add-on or plugin for displaying media files you can use the native support provided by HTML5. Using these elements is quite straightforward. For example, consider the following markup:
<audio src="audio1.mp3" controls loop="loop" autoplay="autoplay"></audio> <video src="video1.webm" controls loop="loop" autoplay="autoplay"></video>
The first line of markup uses the <audio> element to play the audio1.mp3 file. The presence of the controls attribute displays play/pause/volume buttons. The loop attribute indicates whether the file is to be played in a loop once complete. The autoplay attribute indicates whether the file is to be played as soon as the element is rendered in the browser. The <video> element has the same set of attributes but plays the video1.webm file. The following figure shows how the <audio> element looks in Chrome:
<audio> element in Chrome
Not all of the browsers support the same audio and video formats and you may need to provide some fallback mechanism. You can accomplish this by using a variation of the <audio> and <video> elements. The following markup shows how:
<video controls> <source src="video1.webm" /> <source src="video1.mp4" /> </video>
The above markup uses the <video> element but this time instead of specifying a file using the src attribute it uses the <source> nested element. You can have a series of <source> elements for each supported media format (webm and mp4 in this case). If a browser is not able to play a format it will skip to the next file and attempt to play it.
You can also control the <audio> and <video> element programmatically. The <audio> and <video> elements expose a set of methods and events that you can handle using a client side script. For example, you may create a custom audio or video player that has fancy buttons or a customized look and feel. The following jQuery code shows how an audio file can be played and paused programmatically.
$(document).ready(function () {
$("#btnPlay").click(function () {
var audio = $("audio").get(0);
audio.play();
});
$("#btnPause").click(function () {
var audio = $("audio").get(0);
audio.pause();
});
});
As you can see, the audio DOM element exposes play() and pause() methods that are used to play and pause an audio file respectively.
Canvas Element
Although HTML always supported displaying images, this support was limited to displaying existing image files. In the past it wasn’t possible to generate graphics programmatically in the browser. The HTML5 <canvas> element provides a rich set of APIs for in-browser drawing and graphics capabilities. The <canvas> element can be of great use while developing HTML5 based games, displaying charts, generating image previews and more. The <canvas> element by itself is quite straightforward to use as shown below:
<canvas height="500" width="500"></canvas>
The above line of markup defines a canvas of size 500 X 500 pixels. However, the above markup is of little use unless you draw something on the canvas. You can draw lines, curves, shapes, text, images and more on the canvas using the canvas API. Just to give you an idea of how the canvas API can be used, the following code draws some text on the canvas.
$(document).ready(function () {
var canvas = $("canvas").get(0);
var context = canvas.getContext("2d");
context.fillStyle = "blue";
context.font = "bold 30px Arial";
context.fillText("Hello World!", 50, 100);
});
The above code grabs a reference to a canvas element. The getContext() method returns what is called as a drawing context – an object used for performing drawing operations. The fillStyle property of the context object is set to blue to indicate the color of the text. The font property is set to Arial, 30 px, bold. Finally, fillText() method is used to draw a string on to the surface of the canvas at a specified location (50, 100). The following figure shows how the canvas looks after drawing the text:
The canvas after drawing the text
New Input Types
While developing HTML forms you often deal with data of a particular type or format – numbers, date-time values, colors, ranges, URLs, email addresses and so on. HTML5 provides many new input types that simplify your job. Some of the new input types include:
- number
- date / datetime
- color
- range
- url
- tel
Not all browsers support these new input types equally but those that do can render the input field as a special control. For example, after setting the type of an input field to date, Chrome shows it as follows:
Date input field
These input types also come in handy for validating the format of the input. For example, if you enter a string in an input field whose type is number, Chrome shows an error like this:
Chrome error
Miscellaneous Form Features
In addition to the new input types HTML5 offers form features that simplify the overall form and input handling. These features include:
- An input field can be marked as a required filed using the required attribute.
- A field can be marked to receive the initial focus using the autofocus attribute.
- An input field can have a “watermark” text with the help of the placeholder attribute.
- Data entered in an input field can be checked against a regular expression using the pattern attribute.
- Form action and method can be set in a submit button using the formaction and formmethod attributes.
Although we won’t discuss these features here in detail, let’s see how some of them can be used.
Many data entry forms expect that some value must be entered in textboxes. To enforce this requirement HTML5 the provides required attribute. Consider the following markup:
<input id="text1" type="text" required/>
Notice that the input element has the “required” attribute at the end. If you don’t supply any value for text1, the browser will show an error message and refuse to submit the form. The following figure shows how Chrome shows the error message:
Chrome error
Many times you want to indicate to the user what kind of data is to be entered in a field. For example, if you want the user to enter a telephone number, you may consider giving an example phone number that shows the format in which the telephone number is to be entered. The HTML5 placeholder attribute provides an elegant approach that allows you to specify such help text. Consider the following form:
<input id="text1" type="text" placeholder="(123) 123-1234" />
The above markup displays a placeholder in Chrome like this:
Placeholder in Chrome
New input types of HTML5 take care of many of the common formats, reducing the need to explicitly validate the fields (in supported browsers) but at times you need to perform some custom pattern matching. For example, you may want to accept currency values in a specific format. That is where the pattern attribute of HTML5 comes into the picture. It takes any regular expression and validates the entered value against it. The following example shows how the pattern attribute is used:
<input id="text1" type="text" pattern="^s*([a-zA-Z]+)s*$" required />
Notice how the regular expression specified by the pattern attribute ensures that only alphabets are allowed. If you try to enter a number in the text1 field Chrome will give an error.
Normally, you would set action and method attributes of a form element to indicate the action URL and form submission method (GET/POST). HTML5 allows you to set these values from buttons. The following markup shows how:
<input id="Submit1" type="submit" value="Submit" formaction="/home/processform" formmethod="post" />
As you can see, the formaction attribute submits the form to a server side resource at /home/processform. The formmethod attribute sets the form submission method to POST.
Custom Data Attributes
Generally HTML elements have a fixed set of attributes that can be assigned (either through markup or via client side script). HTML5 Custom Data Attributes (data-*) allow you to define custom attributes for an HTML element. These custom attributes won’t affect the user interface of the element in any way but you can access and manipulate them via client script. These attributes take the form of data-* where * is any developer defined name. e.g. data-validationmessage. How to put data-* attributes to use is totally developer defined. For example, some jQuery plugin may use data-* attributes to specify a tooltip for a DOM element. Or some validation library may use data-* attributes to specify validation related metadata such as an error message and error message style.
The following markup shows how custom data attributes can be used:
<input type="text" id="text1" data-validationmessage="Invalid input!!!" />
The above markup sets data-validationmessage attribute to “Invalid input!!!”. You can read this attribute programmatically as follows:
$(document).ready(function () {
alert($("#text1").data("validationmessage"));
});
The above jQuery code uses the data() method to read the data-validationmessage attribute. Notice that you don’t need to include data- while specifying an attribute name while calling data() method. Although this example uses jQuery, you could have also used plain JavaScript to access data-* attributes.
Summary
HTML5 has a lot of features to offer. This article discussed some important features that you may find useful. We discussed the <audio> and <video> elements, <canvas> element, new input types, some form enhancements and custom data attributes. These are just a few of the features that HTML5 has to offer. Although these features are not supported equally in all the browsers, you can start using them today. Modern websites and development tools try to leverage the HTML5 features and knowing them is important for any web developer.
