Building HTML5 Pages

Here we take a closer look at the various ways in which you can organize and structure page content using HTML5.

Earlier that we've built the skeleton of a web page using HTML5's new markup tags, we'll build on it with tags to define text types and formatting, and explain how to relate captions to images and other content, and how to specify live media sources.

Mark Out Page Content

Many changes in HTML5 relate to the way in which a page is put together. Most websites use <di v> tags to mark out various content areas, as this makes them load more quickly than if content is laid out in a large table. The system is inefficient, though- without subsequently naming each <div> individually, it's impossible to tell one <div> tag from another. HTML5 overcomes this problem with <header>, <nav>, <footer> and <article>.

Instead of requiring descriptive names for each <div>, HTML5 code is more regimented, better organized and easier to navigate. If you want to differentiate between <nav> elements on a page, for example, you can apply id or class attributes to them, defined in your stylesheet. Any content between the opening and closing <article> tags should be self-contained and still make sense to the reader if removed from the rest of the page in which it appears. It can contain its own headers, body copy and sub-articles, and probably include one or more <section> layers if its contents are particularly long.

Highlighted Text & Time Data

Unless you're building a photography portfolio, the bulk of your content will be text, and in this respect HTML5 developers are well catered for. As well as <aside> and <summary>, HTML5 introduces the idea of highlighted text and specific time data. It also makes changes to the way the regular cite, bold and italic tags are used.

Additional time and date data is embedded, but isn't rendered when the text is displayed in the browser

The new <mark> tag formalizes the way in which text is highlighted, in much the same way that HTML5's layout tags standardize the naming of standard page sections. For example:

<p>The text between the mark <mark>and</ mark> mark tags is highlighted. </p>

In itself, this doesn't make any difference to the text as displayed on the page - it just picks out the word 'and' for further processing. To change the way it's highlighted, you must define a style for <mark> in your stylesheet. The following would change the background color of that word to emulate a highlighting pen:

mark {background-color: #FFFFOO;}

The <b> and <i> still apply bold and italic formatting to text, and can be defined specifically using a referenced stylesheet. For your site to be fully HTML5-compliant, however, these tags should no longer be assumed to mark out the text as being of any greater importance that the text that appears around it. Likewise, where cite used to pick out the name of a person who originated a quoted work, it is now used solely to name the work itself, such as a book, film or radio programme. Like <mark>, its styling would need to be defined within your stylesheet.

The <time> tag marks out sections within your content as times or dates, with two variables - datetime and pubtime - more clearly defining an element as a specific moment that relates to the content wrapped inside the tag. At its most basic, you would use the <time> tag without any variables to mark up a particular part of your content as being a time or date, so:

<p>The bus leaves at <time>22:15</ time>.</p>
<p>Your rent is due on <time>2011-06- 28 </time>.</p>

By adding the datetime variable to the tag, you can add extra information to the tagged text. This information isn't displayed, but because it's encoded within your document it's made available to any application that scrapes your code for content, such as a calendaring application.

The following are all valid uses of the <time> tag, combined with its datetime attribute to provide detailed information that supplements the text:

<p>Assembly takes place <time datetime= "09:30''>first thing</time> every morning.</p>
<p>His birthday is <time datetime="2012- 02-21">next Tuesday</ time>.</p>
<p>Don't miss your <time datetime="2012- 04-16T09:30:20">next appointment</ time> with the consultant.</p>

In the third example, we've specified both a date and a time, with the control character 'T' used as a separator between them. Each variable within the <time> tag is denoted in order, from the largest to the finest division - from years down to second s, in other words- in line with the proposal set out in RFC3339 (tools.ietf.org/ html/rfc3339). This avoids any problems thrown up in translating from European to US date formats.

The <mark> tag lets you define how text should be highlighted. It works in Chrome but not in IE9

Pairing the <time> tag with its pubdate variable allows you to specify the date and time on which a particular part of your page was created. This lets you indicate the currency of certain data such as share prices or, as in this example, the viewing times for films at a cinema in the coming week:

<time pubdate="2011-08-12">
<article>
<header>This week's showing times </header>
<b>Amelie</b> <time>19:30</time> I <time>21:00</time><br/>
<b>Bourne Ultimatum</b>
<time>21:30 </time><br/>
<b>Carry On Camping</b> <time>12:30 </time> I <time>15 : 00</time>
</article>
</time>

Here we are combining both the pubdate variable, as a means of telling visitors (or at least their browsers) when the data within the article was published, and the plain <time> tag to mark out the showing times of each film. This element could easily be automated when outputting data from an under lying database, or used as the publication date marker on a blog post or news story.

The <article>, <section> and <time> tags make short work of formatting, this table of film times

Relate Images to Text 

In HTML 4.01, there's no way to tell anyone who looked at the underlying code - or any search engine spider - how an image relates to the text around it. Captions on the rendered page don't exist outside the finished content and aren't fundamentally linked to the images themselves. HTM LS introduces the concept of figures and captions to establish a proper link between the two. The <figure> tag works as a container for a loose collection of related elements, in much the same way that <aside> can bundle together a header, content and footer to sit outside the main flow of the page.

There are other similarities between <figure> and <aside>. The W3C draft describes <figure> as representing "a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved from the main flow of the document without affecting the document's meaning".

The key difference is the level of importance to the reader's appreciation of the main body of the page. If the content is directly related to the page but could be positioned anywhere, use <figure>. If it's only tangentially related to the main body, use <aside>. The <aside> used on page 69 presented a box of obsolete tags that replicated content within the main body, but could easily be removed as the information was available elsewhere. The <figure> in the example below might illustrate a Contact page on a site with a photo of a building. It would be an important element, helping those who visit the office to locate the relevant building, but could be positioned anywhere on the page - it needn't be anchored within a specific b lock of text.

You add a captioned image to your page Using:

<figure>
<img src="office . jpg" alt="ACME premises">
<figcaption>ACME's central London offices</figcaption>
</figure>

The term <figure> shouldn't be taken literally, as the tag can be used to bundle together a general illustrative item, such as a block of code, a table or a <di v> layer that merits its own caption.

By specifying several video sources, the HTML5 Demos site caters for a wide variety of platforms and web browsers

Embedding Media

We've already touched briefly on embedding media using HTML5. There are four primary media tags: source, audio, video and embed. The <embed> tag is a catch-all, letting you use a plug-in to handle media that can't be played back natively within the browser. The only required attribute is the media file (you don't need to point to the plug-in used to render it), but you can add height, width and a media type. The media type helps visitors' browsers to pick the appropriate plug-in to play the file, and the height and width enable browsers to leave a gap of the required size to hold the media while it loads the rest of the content. This means browsers on slower connections will be able to render most of the page properly, and therefore reduce the chances of your visitors clicking away.

<embed src="bikeride.flv" height="SO" width="lSO" type="application/ x-shockwave-flash"> 

There's no need to close off the embed tag with a matching </embed> in this instance.

By contrast, the <audio> and <video> tags can take a closing tag, letting you specify multiple source files; your visitor's browser will pick the first one in the list that it can play, much as it would choose the first available font from a specified family.

The following would be used to embed an AAC audio file for which there are no alternatives, complete with transport controls:

<audio src="podcast.m4a" controls= "controls"> 

If you've provided Ogg Vorbis and Wav versions of the file for visitors whose browsers can't handle AAC files, you can take the attributes out of the tag itself and list all the possible source files, with those you'd rather be used first higher in the list. You end the list with the closing </audio> tag as follows:

<audio controls="controls"> <source src="podcast.m4a" /> <source src="podcast.wav" /> <source src="podcast.ogg" /> </audio>