Tuesday, 28 August 2012

An Introduction to HTML5 Features

HTML5 promises to make a serious impact on the future of Web design and development. At the moment the level of browser support is still pretty low, but that doesn't mean you can't start using the new HTML5 features in your projects. For those users whose browsers do support the new features, you can create sites that are more engaging and accessible than before. As long as you ensure your sites are still accessible to the users with a lower level of browser support, providing alternative content items if necessary, you can get stuck into HTML5 now.


The HTML5 DOCTYPE is incredibly simple, which is great news for developers. No more copying and pasting complex and unreadable DOCTYPE declarations, not to mention trying to decide which one to go for and then the inevitable hassle of getting your pages to validate. With HTML5 there is one very straightforward and memorable DOCTYPE declaration. Here it is:

<!DOCTYPE html>

Yes, it really is that easy! Just follow this with your HTML element plus head and body content and away you go. There is no other fundamental difference in terms of page structure with HTML5, so you can update existing markup without too much trouble.

New Elements

Among the most noteworthy HTML5 features are the new elements. With HTML5, the approach to page structure is fundamentally different. HTML5 includes a range of new structural elements: header, footer, nav, aside, section and article - we'll go through these next. HTML5 also includes new media elements such as video and audio, which we'll also briefly introduce. There are actually lots of new elements in HTML5, we're just going through some of the more notable and accessible ones.

Before we get onto actual markup examples, it's worth understanding that HTML5 is designed for more semantic Web design and development than previous versions. In an abstract sense, this means that the markup elements themselves indicate something about the meaning of the element content, rather than being purely structural. Don't worry if you're baffled about the semantic Web development concepts, as they will become clear as we work through the structural elements below.

Structural Elements

The new structural elements in HTML5 allow you to define the parts of your page as semantic items. The header element can be the header content for a page or a section of a page, while the footer element models content for the footer of a page or section. These are indicated by the HTML5 header and footer tags as follows:

page header

Here is some header text

Here is the main content area
Here is the footer info

Most pages contain at least on navigation section, which in HTML5 you can use the nav element for:

The section element defines any kind of section you choose to divide your page into, using section tags as follows:

Here is some info


Grouped together within a section

The article element is designed to be used for a chunk of content that can stand in its own right, i.e. one or more content items that would make sense when presented on its/their own. Examples of article content would be forum and blog posts, news articles etc. The article tags appear as follows:

Here is some news

This is the content of the news

news picture

The aside element provides supplementary content for another content item. The aside tags should include information or other content that is relevant to the content within the element it is contained within, i.e. extra info about the parent element content:

Here is some info

As you can see, the structural HTML5 elements allow you to build a level of logic and meaning into your Web page markup.

Media Elements

HTML5 includes a range of media elements including those for presenting video, audio and the canvas element for JavaScript delivered graphics. The video tags can be included as follows:

The audio tags can be included as follows:

As you can see both the audio and video elements include source elements indicating the names, locations and types of the media files to play.

The canvas element is potentially one of the most exciting new HTML5 features, as it allows your pages to serve graphics through JavaScript directly to your users as they interact with the site. The following code demonstrates the canvas tags:

This draws a simple rectangle outline.

Input Elements

HTML5 offers new options for capturing user input within Web forms. The new elements include datalist, keygen and output. Since these are a little advanced for this introductory article, we won't go through them in detail. If you want to find out how to use the new HTML5 form elements, see the links at the bottom of the article.

Browser Support

At the moment, browser support is the number one issue to consider when building HTML5 websites. The support level is not great at present, but ultimately HTML5 will make it easier to provide support for users with legacy browsers. The browser software programs are of course always evolving, so your HTML5 markup will become more and more usable all the time. There are lots of good resources around the Web listing which HTML5 features are supported by which browsers, so these are well worth checking out on a fairly regular basis if you're planning on using HTML5 now. The HTML5 Please site is one of the most reliable sources.

Although resources like HMTL5 browser support sites are useful, they are not exhaustive and cannot be relied on for guarantees about browser support. As always, it's essential that you test your own sites on as many browsers, device types and operating systems as you can. This is a hazy area at the moment and is likely to be for some time. On the plus side, by getting stuck into HTML5 early on, your future development projects will benefit from the more semantic and user-friendly approach you will have already adopted.

See also:
How To: HTML5 Local Storage
Why Web Developers Are Excited About HTML5 and CSS3
How to Get Started with Web Development

No comments:

Post a Comment