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):

<video src="good-dog.flv" width=200 height=120 controls 
       poster=preview.jpg />

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:

<video width=200 height=120 controls poster=preview.jpg>
  <source src=video.ogv type=video/ogg>
  <source src=video.mp4 type=video/mp4>	
  Your browser does not support video. 
  Please <a href=video.ogv>download it</a>.
</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:

<canvas id="canvas" width="200" height="200">
  Your browser does not support HTML5 Canvas.
</canvas>

<script type="text/javascript">
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  context.fillStyle   = '#f00'; // red
  context.fillRect(0, 0, 100, 100); 
</script>

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:

<svg width="200" height="200" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
 <rect width="100" height="100" style="fill:rgb(255,0,0)"/>
</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.