Mike Griffiths

You may or may not know that the HTML 5 specification is nearing completion. Normally browsers begin implementing the features of a new mark-up version long before the specification is completed so that developers can begin writing web pages and the browsers will be ready to cope with them. HTML 5 is no exception.

HTML 5 proves to be a much anticipated release that promotes web applications over conventional flat websites. There are several new tags that have been added that I will go through in the post. These tags are aimed at creating rich web applications and streamlining current web apps. As you’ll probably guess from reading the descriptions of each tag, they’re also likely to make search engines’ jobs far easier.

HTML 5 has been made so that it is backwardly compatible with older versions of the mark-up. As with HTML 4, there is a XHTML counter-part which is far less forgiving with coding mistakes.

Elements

section

The section tag is used to define (you guessed it) sections of a document. ‘Sections’ may include things like the header, footer, paragraph or chapters.

article

The article tag is used to link in EXTERNAL articles. The specification defines external articles as things like forum posts, blog posts and reviews from other websites.

footer

A large number of websites out there today have footers that normally contain information about the document such as copyright, name of the author, date of publication and sometimes generic links. This is exactly what the footer element is for.

audio

Now we get into the more interesting stuff. The audio tag essentially allows you to play audio through the browser, a feature that was tried and failed some years ago with the bgsound attribute of the body tag. The audio tag will have various attributes to control it’s behaviour, such as whether or not to show controls, whether to auto-play, the ability to have loops within the file, to play the file a set amount of times or to have the file play indefinitely.

video

Very similar to the audio tag, only streaming video rather than audio. One additional attribute is ‘poster’, which allows you to specify a URL of an image you want to display while the video is first buffering.

progress

The progress tag is used to display progress of a time consuming function in JavaScript. This could be used to monitor the download or upload of a file. Quite handy really.

nav

We should all have some sort of navigation on our websites. The nav element is for just that. Whether it’s your menu at the top or left of your page, footer links or next and previous links for pagination, they should all be inside the nav element in HTML 5.

meter

The meter tag defines measurements of any given unit. When using it the author must give a minimum and a maximum of the measurement. There are attributes for min and max, but it is also possible to define the max and min from within the tag itself, for example: <meter>8 out of 10</meter> or <meter>80%</meter>.

time

This tag is for defining times. Often we use plain text to define dates, such a Christmas day. This should be written as <time datetime=”2009-12-25″>Christmas day</time>.

aside

aside is to be used in conjunction with an <article>, or on it’s own. Its content is to be related in some way to the article.

canvas

Another new feature in HTML 5 is the canvas. The canvas element allows authors to create bitmap images in real time. Before this had to be done using some sort of server-side scripting such as PHP using GD-lib or a standalone application like ImageMagick.

datagrid

The datagrid display data given to it in a tree-list view. It is possible to have multiple items selected using the multiple=”true” attribute.

Attributes

There are a series of new standard attributes available in HTML that were not available in HTML 4.

contenteditable

Allows the author to set whether content is editable by the user.

contentextmenu

The value for this would be a menu ID and would specify the context menu for the given element.

draggable

This will allow authors to set whether the element may be dragged, whether it is to be kept stationary, or whether this choice should be automatic.

irrelevant

Allows the user to mark an element as irrelevant. An irrelevant element is not displayed and is ignored by the browser.

ref

Although this was an attribute before it is now standard. It is to be used in conjunction with templates when the template attribute has been set, it will reference another document or part of a document.

registrationmark

Simple defines a registration mark for the element.

template

Reference another document or part of another document.

Event attributes

There are also new event attributes. Handy for making more rich applications.

onabort

When the element has been aborted then this script is run.

onbeforeonload

Run before an element has been loaded. Handy for a pre-loader perhaps?

oncontextmenu

Script to be called when a context menu is triggered.

ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop

The script to be ran when the element is being dragged, at the end of the drag, has been dropped in a valid target, is hovering over a valid drop target, at the beginning of a drag and when the element has been dropped, respectively.

onerror

The script that is called when there was a problem loading an element.

onmessage

Script called when a message event is triggered.

onresize

Script called when an element is being resized.

onscroll

Script called when an element’s scrollbar is being used.

onunload

Script to be ran when an element unloads.

Deprecated events

There is also one event that is no longer supported:

onreset

Script called when a form has been reset.

Conclusion

There are a lot of new features out there, all of which are already possible through the use of things like jQuery, but HTML 5 proves to make these features more accessible to developers and users. You will now not need various plug-ins (Flash) or have to have certain aspects of your browser switched on (JavaScript) in order to access a websites rich content.