HTML5 Tags
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.
<aside>
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.
For example:
12345 | <p>The big dog ran to the park.</p> <aside> <h4>The Big Dog</h4> You can read more big dog stories on the next page. </aside> |
<audio>
Use this tag to insert streaming audio into the user’s browser. With it, no plugin is required.
Example:
123 | <audio src="music/Foha/lastsong.ogg"> <p>Your browser does not support the audio element. Please download the audio file below.</p> </audio> |
Content between the opening and closing tag is fallback content, in case the user’s browser does not support the audio tag.
<canvas>
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:
01020304050607080910111213141516171819 | < html > < head > < script type = "application/javascript" > function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } </ script > </ head > < body onload = "draw()" > < canvas id = "canvas" width = "300" height = "300" ></ canvas > </ body > </ html > |
<dialog>
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.
Example:
12345678 | <dialog> <dt>Hero <dd>You killed my father! <dt>Villain <dd>A necessary evil. <dt>An evil that cannot go unpunished. <dd>Then you will join your father in death. </dialog> |
Like most HTML tags, you can assign styles to the tags, making them consistently appear however you wish.
<embed>
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.
Example:
1 | <embed type="video/quicktime" src=/media/bunny-hop.mov" width="800" height="480" /> |
<header>
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.
Example:
<header>
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.
Example:
1234 | <header> <h1>The Beginning of the Ed</h1> <h2>A book by Kensony Lippet</h2> </header> |
1234 | <header> <h1>The Beginning of the Ed</h1> <h2>A book by Kensony Lippet</h2> </header> |
The <header> tag can hold style elements to customize the appearance
<footer>
The <footer> tag is basically the same as the <header>, only it appears at the bottom. It will usually contain copyright information, terms of use, privacy policy, “last updated” date, etc.
<mark>
Use the <mark> tag to highlight relevant text in a specified context. This is useful for annotating or enhancing text.
Example:
1 | <p>Another new feature that was previously previewed and is now available to all is the <mark style="background-color:yellow;"> Blogger Template Designer</mark>. With it, users can choose from 19 stock templates and create customizations to suit their needs, including background images, colors, and layout manipulation.</p> |
<video>
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.
Example:
12 | <video src="media/videos/last-dragon.ogg" width="320" height="240" controls><p>If you can read this, it means that your browser does not support the video element. </p> </video> |
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:
Browser/Video Format | Theora | WebM | H.264 |
Mozilla Firefox | Yes | In development builds | No |
Google Chrome | Yes | In development builds | Yes |
Apple Safari | No | No | Yes |
Opera | Yes | In development builds | No |
iPhone/iPad | No | No | Yes |
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.