JitNik's Tech World

Why should web designers start looking at HTML 5 and what are the advantages it can bring to our work? In this short blog post we run through a few of the many advantages we can gain from latest incarnation of HTML.

Improved Code

HTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and replace them with semantic HTML 5 elements.

Greater Consistency

As websites adopt the new HTML 5 elements we will see far greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it far easier for web designers and web developers to immediately grasp how a web page is structured even if they are brand new to it.

Improved Semantics

As the elements used to code a web page are standardised, using the new HTML 5 elements, the semantic value of every web page will increase. As it will be easy to see which parts of the page are headers, nav, footers, aside, etc. and most importantly know what their meaning and purpose is in a machine readable format.

Improved Accessibility

With HTML 5 it should be possible for assistive technologies to expand on the features they can offer their users as they can immediately build up a more detailed understanding of the structure of a page by looking at the HTML 5 elements it contains. Could this spell the end for skip links?

Audio And Video

The new video and audio elements make this really easy. Most of the APIs are shared between the two elements, with the only differences being related to the inherent differences between visual and non-visual media.

Both Opera and WebKit have released builds with partial support for the video element. You may download the experimental build of Opera or a recent nightly build of WebKit to try out these examples. Opera includes support for Ogg Theora and WebKit supports all the formats that are supported by QuickTime, including third party codecs.

The simplest way to embed a video is to use a video element and allow the browser to provide a default user interface. The controls attribute is a boolean attribute that indicates whether or not the author wants this UI on or off by default.

[video src="video.ogv" controls poster="poster.jpg"
width="320" height="240"]
[a href="video.ogv"]Download movie[/a]
[/video]

The optional poster attribute can be used to specify an image which will be displayed in place of the video before the video has begun playing. Although there are some video formats that support their own poster frame feature, such as MPEG-4, this provides an alternative solution that can work independently of the video format.

It is just as simple to embed audio into a page using the audio element. Most of the attributes are common between the video and audio elements, although for obvious reasons, the audio element lacks the width, height, and poster attributes.


Download song

HTML 5 provides the source element for specifying alternative video and audio files which the browser may choose from based on its media type or codec support. The media attribute can be used to specify a media query for selection based on the device limitations and the type attribute for specifying the media type and codecs. Note that when using the source elements, the src attribute needs to be omitted from their parent video or audio element or the alternatives given by the source elements will be ignored.

[video poster="poster.jpg"]
[source src="video.3gp" type="video/3gpp"
media="handheld"]
[source src="video.ogv" type="video/ogg;
codecs=theora, vorbis"]
[source src="video.mp4" type="video/mp4"]
[/video]
[audio]
[source src="music.oga" type="audio/ogg"]
[source src="music.mp3" type="audio/mpeg"]
[/audio]

For authors who want a little more control over the user interface so that they can make it fit the overall design of the web page, the extensive API provides several methods and events to let scripts control the playback of the media. The simplest methods to use are the play(), pause(), and setting currentTime to rewind to the beginning. The following example illustrates the use of these.

There are many other attributes and APIs available for the video and audio elements that have not been discussed here. For more information, you should consult the current draft specification.