Experimenting with HTML5

There is a lot of buzz around the emerging HTML5 standard yet there is a difference of opinion among developers in terms of adoption. Some takes the wait-and-see approach while others are ecstatic about its potential and start learning and experimenting with it. Even though it will take HTML5 some more time to be universally available, a lot of popular browsers and sites already support it. It’s the right time to start experimenting with HTML5 and even CSS3 and learn how to prepare your site for the future Web. In this article, we take a look at some of the new features of HTML5.

Please note that HTML5 is still a working draft and thus not stable across all browsers. For a list of HTML5 elements and features as supported by different browsers, please visit the Comparison of Layout Engine page.

HTML5 Structure Elements

HTML5 Structure

Most web pages contain common structures like headers, footers, sidebars and main content areas. In HTML4 designers use <div> tags to differentiate and style these different sections. While this works fine, the problem is that it is difficult to process these pages because they lack semantics. HTML5 introduces a set of new elements that makes it easy to structure your page through the use of tags like: <header>, <nav>, <article>, <aside>, <footer>. The potential of this is huge – for example, search engine will be able to figure out where your main content resides and index that section only.

HTML5 Inline semantic elements

Several new elements have been added to HTML5 to support indication of basic quantities like time and numbers.

<mark> – allows you to mark a particular keyword on your page. For example, you can mark all returned keywords in a search result page.

<time> – this elements indicates a specific date and time. You can use any format you’d like, but for a more semantic approach, you can use the datetime attribute: <time datetime=””>

<meter> – this can be used to indicate content that is a fraction of a known rage like disc storage usage. It has attributes like value, min, max, low, high and optimum.

<progress>– this elements allows you to specify the percentage progress of an ongoing process. It has the attribute value and max.

HTML5 Datepicker in Opera

HTML5 Input Types for Form

Along with the standard form input types, HTML5 will support several new input types like:

• – datetime
• – date
• – time
• – month
• – week
• – number
• – range
• -email
• – url

The date input type for example will automatically display a date-picker. In terms of form validation, you will also be able to specify the required attribute to denote fields with required input. This will help a lot form form validation.

Video and Audio Embedding

While multimedia content is extremely popular online, the format used by different providers differs a lot. HTML5 aims to make the multimedia platform more open by replacing all propriety formats. It also makes the embedding easier. Right now, developers have to resort to using different scripts or players to stream audio and video content online, but with HTML5 embedding multimedia will get easier through the user of tags like <audio> and <video>

Clock drawn in HTML5 Canvas

HTML5 Canvas Elements

HTML5 canvas elements allows you to dynamically draw graphics using JavaScript. This will be helpful to create canvas for charts, graphs, animation or simply diagrams like flowchart. The <canvas> element is already supported by most browsers.

HTML5 – Dynamic and Interactive Features

Most of the new features introduced in HTML5 aims at helping developing better web applications. As such, several new elements are focused on the user interface for Web applications:

<details> – allows you to specify a tooltip for a particular DOM element

<datagrid> – this will you to create a table from a dataset which can then be updated by the user or scipts.

<command> – defines actions that should happen when a dynamic element is activated

context menus – developers will be able to easily create right-click menus for their Web applications.

Other HTML5 APIs

HTML5 has numerous APIs that open the doors for future Web applications. It will be possible to do application cache, offline data storage and drag and drop right in the browser without downloading any plugins or ActiveX controls.

Have questions or need assistance with HTML5? Visit our HTML5 forum section.