Legend Scrolls

Structure your webpages with HTML 5

Release: 2008-05-06
Jump to Web Standards Articles TOC

, Page 2

More Text-level Elements

Thematic paragraph level breaks can be rendered by having a <hr> void element but some screen readers interpret Thematic Breaks as a long sequence of underscores. It is best to style the bottom border or top border of an element to provide a similar presentational effect.

Most of the following elements are Phrasing Content:
<mark></mark> represents text to be hightlighted or marked (Not supported yet).
<time datetime=""></time> represents dates and times – the datetime attribute provides an application readable version of the date, time or date and time in UTC form (Not supported yet).

<abbr title=""> </abbr> may provide the expanded form in a title attribute of the abbreviated form within the element. The first time of the particular abbreviation on the webpage, the expansion should be in the surrounding text rather than the title attribute. Subsequent times the expansion may be in the title attribute.

<dfn> </dfn> provides a term (as text or in a title attribute or a child <abbr></abbr> element's title attribute), with its definition in the surrounding text - a singular version of the definition list.

<code> </code> represents text as if it was programming code style.
<kbd> </kbd> represents text as if it was keyboard text style.
<em> </em> (as mentioned before) represents text in emphasis (and visually in italics).
<strong> </strong> (as mentioned before) represents important text (and visually bolded).
<samp> </samp> represents text as if it was sample text.
<var> </var> represents text as if variable names.
<cite> </cite> represents a citation.
<address> </address> a Flow-level element represents contact information.
<del datetime=""> </del> puts a line through the text - the datetime has the date and time of the 'deletion' and can have a cite attribute having a URI to a citation.
<ins datetime=""> </ins> the datetime has the date and time of the 'insertion' and can have a cite attribute having a URI to a citation.
<pre> </pre> generic Flow-level element to preserve any spacing and a simple font and can only have Phrasing Content within it.
<sup> </sup> represents superscripted text.
<sub> </sub> represents subscripted text.
<q> </q> represents quoted text (Quotation marks are left to you to manually add); a cite attribute can be used, having a URI to the source of the quote.
And finally <blockquote> </blockquote> a Flow-level element that pads the left and right of the paragraph like a quote paragraph and must only be used for such quote paragraphs.

Cascade Stylesheets are to be used for any further styling.

Canvas

To provide the ability to programatically 'paint' images and even animate and make then interactive at a native level (as apposed to Flash, Silverlight, etc which require plugins) a <canvas></canvas> element can be used. It is an Embedded Element, like <object></object>, can be placed within Phrasing Content and so only have alternative content within the start and end tags as Phrasing Content or placed within Flow Content and have Flow alternative Content. In order to 'paint' on the canvas you use scripting:

<canvas id="interimage1" width="300" height="300"></canvas>
<script type="text/javascript" src="scripts/drawit.js"></script>

In drawit.js:

var iimage = document.getElementById("interimage1");
if (iimage.getContext) {
  // Get 2d context for the image
  var iimaget = iimage.getContext("2d");
  // Set color to red
  iimaget.fillStyle = "#ff0000";
  // Draw rectangle
  iimaget.fillRect(100, 100, 50, 50);
} else {
  // Non Canvas handling code.
} // End if Canvas is supported

Currently Apple (who invented canvas) Webkit based such as Safari (even on the iPhone and iPod Touch) and Dashboard, recent Presto based such as Opera 9 and higher and Gecko 1.8 and higher based such as Firefox 1.5 and SeaMonkey support canvas.

For a tutorial on canvas: Mozilla Canvas Tutorial seems to be the prominent one.

Audio and Video

<audio></audio> allows native embedded audio file support like <img> provides native image support. A src attribute specifies the audio file, autoplay or autoplay="autoplay" makes the browser automatically start playback when the page loads. start and end attributes states where in the audio progress the environment should start and stop the playback. Looping can be done using the loopstart and loopend attributes.
playcount will tell how many times the environment will play the audio file. The controls or controls="controls" attribute will generate a default control bar or panel with play/pause/stop, progress track, volume and a button to play the audio track in an external player.

<audio id="mySample" src="media/sample.m4a" playcount="2" controls></audio>

<video></video> allows a similar thing to <audio></audio> but for playing audio visual movies. All the attributes that <audio></audio> has plus width and height attributes can specify static dimension for the movie control.
The poster attribute specifies an image to be displayed while the movie is downloading or buffering or stopped.

<video id="trailer1" src="media/trailer.mp4" width="300" height="200" poster="media/trailerposter.png" controls></video>

To handle the fact that an environment may not support a particular audio or video format you can use two or more <source> void elements inside <audio></audio> and <video></video> Embedded Elements (before any other appropriate markup for those browsers that do not support <audio></audio> and/or <video></video>). The <audio></audio> or <video></video> elements must not have a src attribute if there are any <source> children. Attributes for <source> are a src for the particular audio or movie file and a type attribute to specify the MIME Type of the audio or movie file.

<audio id="mySample" playcount="2" controls>
  <source src="media/sample.m4a" type="audio/x-m4a">
  <source src="media/sample.mp3" type="audio/mpeg">
  <source src="media/sample.wav" type="audio/wav">
</audio>
<video id="trailer1" width="300" height="200" poster="media/trailerposter.png" controls>
  <source src="media/trailer.mp4" type="video/mp4">
  <source src="media/trailer.mpg" type="video/mpeg">
  <source src="media/trailer.avi" type="video/avi">
</video>

There is also a scripting API (Application Programming Interface) to script your own controls:

var trailer1 = document.getElementById("trailer1");
if (trailer1.paused) {
  trailer1.play();
} else {
  trailer1.pause();
} // End if trailer1 is paused

Opera 9 supports partial <audio></audio> support and Apple Webkit 525 and higher such as Safari 3.1 supports partial <audio></audio>, <video></video> and <source> support.

This article is not exhaustive. HTML 5 is currently a working draft. You can view the actual specification for more features and even propose new features at either the WHATWG website or the W3C HTML Working Group website.

, Page 2

Copyright ©2008 Legend Scrolls and Peter Davison.
The Globe icon from Crystal Project Icons: LGPL, Copyright © Everaldo.
All rights reserved.