As a web designer, it is important for you to keep up on the latest technology available to you. Although full adoption of HTML5 is probably still a few years away, learning how to create some HTML5 tags on your websites will put you ahead of the rest.
Furthermore, some tags (the video tag in particular) have already been adopted by certain platforms (think iPhone and iPad). You can ultimately decide if you want to cater to those platforms or not, but being aware of them certainly cannot hurt.
In this article, we will only cover the very basics of HTML5, as each tag could have its own article, if fully explored in-depth. The canvas tag, for example, can be used to produce images for very complex and intricate Web tools, interactive apps, and even games. Nevertheless, you should leave this article with enough knowledge to begin adding HTML5 tags to your work.
First, it is important to know where HTML5 will work if you bother to go through the process of supporting it on your websites. Despite being in its early stages, HTML5 has been gradually adopted by most major web browsers.
The big (and I do mean big) exception is Internet Explorer. The good news, however, is that the next version of IE (9.0) is expected to add many HTML5 tag support to its code.
Current browsers supporting HTML5 in their latest versions are: Mozilla Firefox, Apple Safari, Opera, Google Chrome, iPhone/iPad browser, and Android browser. Because adoption at this point may be sporadic, you should provide alternate methods of presentation, if you do decide to publish with HTML5 on a live website. We will not cover every HTML5 tag. You can, however, view a complete list.
The aside tag, as the name implies, is designed to set content aside from the main content. It is useful for creating sidebars and other related content.
Use this tag to insert streaming audio into the user’s browser. With it, no plugin is required.
Content between the opening and closing tag is fallback content, in case the user’s browser does not support the audio tag.
This tag can be used to create graphics within the web page, without the need for uploading actual image files. Like the <audio> tag, elements are inserted within the opening tag, and anything in between the opening and closing tag is “fallback content” for browsers that do not support it.
Here is a simple example from Mozilla.org:
If you have ever found publishing plays on a website to be tedious, the “dialog” tag will ease some of your tension. With it, you can easily distinguish between the dialog speaker and their actual words.
Like most HTML tags, you can assign styles to the tags, making them consistently appear however you wish.
The <embed> tag allows you to easily insert applications or content from plug-ins (such as Quicktime player). You can specify height, width, and content type. Unlike <audio> and <video>, there is no closing tag and, therefore, no fallback text.
This tag specifies items contained in headings, subheadings, and other preliminary information. It can enclose other tags, such as <h1> between its opening and closing tags.
This tag specifies items contained in headings, subheadings, and other preliminary information.Â It can enclose other tags, such as <h1> between its opening and closing tags.
The <header> tag can hold style elements to customize the appearance
Use the <mark> tag to highlight relevant text in a specified context. This is useful for annotating or enhancing text.
Perhaps the most popular HTML5 tag of all, the <video> tag has received a tremendous amount of press, largely because of the controversy over which format is best. Nearly all browsers have some support for the HTML5 video tag, but they do not all support the same video formats. If you do use it, be sure to have an alternative for each browser and for those that do not support HTML5 at all.
Like the <audio> tag, the <video> tag has a closing tag, and “fallback content” can be placed in between. The web designer can specify autoplay, loop, controls, width, height, and poster (which displays an alternate image, if the browser has not yet loaded the video). The web designer can also include style elements within the tag.
Because the landscape of this technology is changing rapidly, I recommend that, if you do use it, do not use automatic browser detection to determine if your site should display the content or offer an alternative. This will only alienate your users who may have a browser you did not consider. The better method is to publish the <video> tag and then also offer an alternative method (such as a direct link to the video or an embedded Flash version).
Current support for the <video> tag:
|Mozilla Firefox||Yes||In development builds||No|
|Google Chrome||Yes||In development builds||Yes|
|Opera||Yes||In development builds||No|
|Internet Explorer||No||No (may support addon in version 9)||Yes (with ChromeFrame plugin and in version 9)|
HTML5 still has a long road ahead to get final W3C standardization, so there is no need to panic if your website is not ready for it right now. When it does come, you will be able to offer your site visitors more clarity, consistency, speed, and embedded/streaming content.