Web Development

The Arrival of HTML 5

By Alexander V. Korostov and Dmitry J. Paramzin, August 13, 2010

Lots of new features, all eagerly awaited

Not By Text Alone

Although HTML was initially a text markup language, its abilities evolved from its 'textual' bounds long ago. New native elements in HTML 5 allow authors to operate non-textual information such as video and sound. HTML 5 has not made major developments in image support.

The new <video> element provides the ability to embed videos inside web documents without using third-party plug-ins like Adobe Flash or Microsoft Silverlight. Below is a simple example of a video element with explicit width and height specifications for a poster image (e.g. representative frame from the video):

The next example illustrates a more complex example where a <video> element may include several sources of a video encoded using different codecs and alternative content to be shown if a browser does not support the video:

Note: An even more complex example may include an <object> element inside the <video> tag to play the video using Flash if the browser does not support the <video> tag out-of-the-box.
The <audio> element is very similar to the <video> element. Both DOM elements extend the same HTMLMediaElement for those have like attributes (the vast majority of them) and methods. Here is an example of that tag:

<audio src="audio.oga" controls>
Your browser does not support audio.
</audio>

Note that there are many additional features of both elements not shown in the examples above such as buffering, auto-playing, and the ability to associate external tracks containing subtitles, captions or descriptions with media content. The bottom line is that, by using video and audio elements with a corresponding DOM interface, web developers can embed and manage multimedia resources without the headache related to embedding external plug-ins for different browsers.

One of the chief innovations related to data representation is the <canvas> element which lets JavaScript developers paint dynamic bitmap content and 2D shapes on the screen. The <canvas> element, in combination with modern speedy JavaScript engines, opens incredible possibilities in the creation of online games and advertisements. HTML 5.0 specification defines the HTMLCanvasElement.getContext(contextId) method that returns canvas context for drawing. Context APIs are not defined in HTML 5.0 specification itself. Context API for 2D rendering is defined in a separate HTML Canvas 2D Context W3C Recommendation that is also currently in a draft state. This 2D drawing API is rich enough to render complex 2D scenes. Dynamism can be achieved by clearing and re-rendering the whole scene or only parts of it. Below is a simple example of defining a canvas element and rendering a red rectangle using 2D context API:

HTML 5.0 also allows embedding SVG (Scalable Vector Graphics) scenes inside a document by using the <SVG> element. SVG is a separate specification of another technology allowing us to define 2D scenes. Compared with <canvas>, SVG provides means for high-level operations of drawing static and dynamic scenes. Basically, SVG is an XML format for defining shapes, text and other visual objects in a scene. As a result, a developer using SVG defines objects to be rendered (i.e. declarative approach and vector graphics) instead of programmatically drawing these objects (i.e. imperative approach and bitmap graphics) when using <canvas>. A SVG scene can be rendered by a browser, a third-party application or a plug-in.

SVG is also much more convenient and powerful for developing dynamic scenes. All defined objects are remembered in a tree similar to DOM and can be manipulated by using languages like ECMAScript (JavaScript) embedded in SVG to change their attributes. This greatly simplifies implementation of dynamic scenes: a developer needs only to change the attributes of a defined object (e.g. position, size, color) and need not implement any code for clearing or re-rendering the scene. This is in sharp contrast with <canvas> where a developer must programmatically clear and re-render the scene. Note that SVG 1.1 supports animation (gradual timed change of position or other attributes) out-of-the-box. Here is an example of the same red rectangle defined in SVG:

A quality critique that helps one decide between using SVG and Canvas by exploring the advantages and disadvantages of each technology for different tasks can be found here. Note that SVG is an older, but less supported technology compared to HTML 5 Canvas.

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!