HTML 5 element basics

One thing that you'll notice about a few of these showcases is that they are making use of HTML 5 markup for the main example structures. For example, the markup from David's newspaper showcase looks like so:

<body>
<div id="page">
  <header>
    <p><time datetime="2007-07-25"><em>Sunday</em> 25 June 2007</time></p>
    <p class="price">25¢</p>
    <h1>The Daily Standard</h1>
    <p class="issue">Issue 35, Volume 16</p>
    <p class="tagline">The latest mark-up, style and techniques</p>
  </header>
  <article>
    <header>
      <h1>Web Fonts are in town</h1>
      <p class="author">David Storey</p>
    </header>
    <section>
      <figure>
        <img src="images/type.jpg" alt=""/>
        <legend>Soon you will not be restricted to web safe fonts, such as comic sans</legend>
      </figure>
      <p>...content goes here...</p>
      <aside><p>Web Fonts allow custom fonts, without Flash or image replacement.</p></aside>
    </section>
  </article>
  <article>
    <header>
      <h1>HTML5 structural markup</h1>
      <p class="author">David Storey</p>
    </header>
    <section>
        <p>...content goes here...</p>
    </section>
  </article>
  <article>
    <header>
      <h1>Transparency revealed</h1>
      <p class="author">James Dean</p>
    </header>
    <section>
      <p>...content goes here...</p>
    </section>
  </article>
  <footer>
    <p>Example by <a href="http://my.opera.com/dstorey" rel="me">David Storey</a>, 2008.  Free fonts taken from <a href="http://www.dafont.com/">Dafonts.com</a>.  Please check font licence agreement before using them on your site. <a href="http://www.flickr.com/photos/tunruh/110315663/">Image licence under Creative Common by Tony Unruh</a></p>
  </footer>
</div>
</body>

Here we have some brand new elements:

<header>: Denotes the header of a section of the page, whether it is the whole page itself, or just a small subsection of it
<time>: Allows you to specify a date/time of publication for the page
<article>: Specifies a subsection of the main page , grouping related content together, such as a header, images, and paragraphs of text
<section>: Specifies a subsection of an article
<aside>: Allows you to define a paragraph as an aside, containing supporting information not critical to the main body of text
<figure>: Specifies an illustrative figure to go along with the text content of your page. This usually groups together an image (or other media) with a caption and/or author attribution
<footer>: Defines a footer for your page, which can contain any information you deem appropriate

Looking at this you might be thinking does that mean browsers are now supporting HTML 5 structural elements?. Yes and no - the W3C haven't yet gotten far enough in HTML 5 standardization for elements to be fully supported by browsers. For now, many of the HTML 5 elements are seen by browsers as unrecognised elements. However, we are already able to play around with the structural elements, faking their basic behaviour, plus the W3C HTML validator is now able to validate code to the HTML 5 doctype. This allows us to learn how to use HTML 5 structural elements early.

In David's newspaper showcase, he has included the HTML 5 doctype - <!DOCTYPE html> - this still puts modern browsers in standards mode. He is using the elements defined in the list above as structural blocks on his page, so to make them behave as he wants, he is setting them to display as block. He is also setting time to display as inline, as that is being displayed as an inline text segment.

header, article, section, figure, aside, footer { display: block; }
time { display: inline;}

This solution seems like a good one, but it is not perfect, so you need to go a bit further if you want to achieve support in older browsers. The problem is that some browsers (such as Firefox 2, Camino 1, and all versions of Internet Explorer) don't see the HTML 5 elements as unrecognised; they don't see them at all! So text marked up with an HTML 5 element can't be styled at all in these browsers, because the elements don't exist in their eyes. There is a workaround for this, and it is explained in the HTML 5 doctor article How to get HTML5 working in IE and Firefox 2.

Another thing to notice is that all the headings in the document are <h1> elements. You might think this is bad practice - normally it is, but in this example David is trying to emulate how headings work in the HTML 5 spec, where all headings are <h1>s, and the heading levels are determined by their position in the structural hierarchy.