twitter rss feed

html5 laboratory

Writing a valid html5 document

The experiment

Before we begin any experiments, the first thing to do is to is to write a valid HTML5 document. Here we face our first problem, because what is a valid html5 document? The validator at the W3C will automatically detect HTML5, but so far only tentatively and it still causes some issues (more on that later).

Below are some details on how to form a simple, valid (to the best ability at the moment) HTML5 layout, taking advantage of some of the new tags and attributes.

The process

All HTML documents must start with a <DOCTYPE>, and HTML5 documents are no different. Except in one way: simplification. No longer need you frantically worry about what guff you need to put in the <DOCTYPE> tag, there is only one: html. And so the <DOCTYPE> for a HTML5 document looks thusly:

<!DOCTYPE html>

How simple is that? I won't even talk about it anymore as there's no need (but you can read more about the doctype in the spec. itself - should you really want to).

Moving on, next is the <html> tag. As with most HTML documents, you can simply use this on its own but I suggest you add the language attribute, but it's up to you. At any rate, it's the same syntax as HTML so nothing has changed here. So for completeness, here it is spelled out for you:

<html lang="en">

Next up is the <head> tag. The tag itself remains the same, with nothing new to report. However some of the standard contents within it have changed.

Firstly, the <script> tag. You know how you currently use type="text/javascript" attribute within this tag when defining JavaScript? Well in HTML5 you don't need to anymore as type defaults to text/javascript. Of course if you are defining code that is not JavaScript then you will have to override the default.

The <style> tag goes pretty much the same way. Since there is currently only one type of <style>, this now defaults to text/css thus allowing you to not bother adding it in.

The only other change here is with regards to the <meta> tag with the charset attribute. Again it's a reduced code tag and you can simply add the charset and not have to worry about anything else. So instead of typing something like:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

you can simply type:

<meta charset=utf-8>

Note that this is a void element and should not have an end tag. This is also where the W3C's validator falls over with HTML5 at the moment, since if you set this in your document, it reports that no character encoding has been found. Note: this has been fixed as of the 3rd March 2010. Many thanks to Hayden for bringing this to my attention.

Within the <body> things are pretty much the same, the use of <h1>, <h2>, <div>, <span>,<p>, <ul>, <a> and the like can continue and are all part of HTML5. However, there are a number of new tags that you can use for structuring your HTML5 document, and I will briefly go into some of these now.

  • <nav> — this is used to enclose navigational blocks, a section of a document that links to other documents or to parts within the document itself
  • <header> — represents the header of a section. Can be used more than once in a document.
  • <hgroup> — a special form of heading that can contain either a single or a group of <h1><h6> elements and nothing else.
  • <article> — this represents a section of content that forms an independent part of a document or site (and is intended to be independently distributable or reusable) for example a magazine article or a blog entry.
  • <section> — represents a section of a document, typically with a title or a heading. This doesn't replace the <div> element, and is only appropriate if there is a natural heading for it.
  • <footer> — this element represents the footer of a section, which has probably been started with a <header> tag, but doesn't have to.

As always, the issue of browser compatibility needs to be mentioned. Most browsers will allow you to name any tags that you like, so whilst some browsers may not strictly support the new tags, they will happily use them, although you will have to provide a default block display style for the structure ones. Adding the following CSS styling will do the trick:

article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }

Of course, as usual, Internet Explorer presents a problem as it is unable to see these elements by default and they need to be added. This can be achieved with the aid of some JavaScript, which creates the elements for IE:

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

If JavaScript isn't enabled, then the document will be displayed as if the HTML5 specific CSS styling hadn't been applied to the document.

That'll for for now, although there are other tags that can be used, but these are the main ones that you will use when putting together a simple HTML5 document.

The results

So what are we left with? Enough HTML5 knowledge to create a simple, valid HTML5 layout that will validate with no errors. You can view the document or the code below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>A simple HTML5 page layout</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
      </script>
    <![endif]-->
    <style>
      body { margin:100px; }
      article, aside, figure, footer, header, hgroup, menu, nav, section { 
        display:block;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="simple-html5-document.html">home1</a>
      <a href="simple-html5-document.html">home2</a>
    </nav>
    <header>
      <h1>A simple HTML5 document</h1>
    </header>
    <article>
      <hgroup>
        <h1>Article 1 heading</h1>
        <h2>Article 1 sub-heading</h2>
      </hgroup>
      <section>
        <h3>Section 1 heading</h3>
      </section>
    </article>
    <article>
      <header>
        <h1>Article 2 heading</h1>
      </header>
      <section>
        <h2>Section 1 heading</h2>
      </section>
    </article>
    <footer>
      <p>This is the footer</p>
    </footer>
  </body>	
</html>