HTML 5 – Page Structure

Having built this site using HTML5. I thought it would be good to share a few of my learnings, resources and tips that I have picked up along the way.

As far as I can gather there is absolutely no reason why not to start using the HTML5 doctype. Its short and simple to write and completely backwards compatible. Well the doctype at least. Most of the new features are not, but some do degrade nicely, especially some of the new form elements. As long as you are aware what features have cross browser compatibility issues then you are good to go.

<!DOCTYPE html>

Page Structure
As you can see by viewing the source code of this site I have started implementing some of the new HTML5 tags. In particular:

<header> – For containing header content. A good replacement for <div id=”header”></div> or whatever <div> you might have used to hold your logo or main page heading content. This tag can also be used for content headers or other heading sections on your page. Feel free to use this tag multiple times if needed.

<hgroup> – Used to wrap several heading tags (h1,h2,h3,h4 etc) if they should be read together. Such as a main title and its sub title.

<section> – Exactly what it says. Used to wrap sections of your page. This will probably end up replacing alot of <div> tags.

<article> – Most likely to be used in blogs or news sections. Wraps each piece of news or each publication.

<footer> – Very similar to the header tag. This would most likely replace your <div id=”footer”></div> or the last section of your page. It can also be used multiple times if required.

To see these tags in action I have put together a really simple site structure as an example:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<title>This is a test</title>
</head>
<body>
<header>This is the main header of the page</header>
<section>
    <header>
        <hgroup>
            <h1>Header of this section</h1>
            <h2>Sub heading of this section</h2>
        </hgroup>
    </header>
    <p>Content for the section</p>
    <footer>Footer of this section</footer>
</section>
<footer>This is the footer for the page</header>
</body>
</html>

You can also see an example of the tags in use by viewing the source of this page.

Semantics
The biggest benefit of the new HTML5 tags is achieving really semantic code. If written correctly your page should have a really logical structure. A good way to check if your code is well written is to use one of the following links:

http://code.google.com/p/h5o/
http://gsnedders.html5.org/outliner/

Cross browser compatibility
To ensure that our new tags are rendered correctly by all browsers, we need to add a small piece of css to set these elements to display as block level elements. This way we can style them in the same way we would the <div> tag.

article, aside, canvas, details, figcaption, figure, footer, header. hgroup, menu, nav, section, summary{display:block}

For IE we need to add some javascript. Setting the elements to display block is not enough. IE doesnt recognise the tags and therefore will completely ignore any styling on them. Using the below JS will fix this problem.

http://code.google.com/p/html5shiv

Resources
Some of my favourite HTML5 resources at the moment are:

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1
http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
http://spyrestudios.com/21-incredible-html5-experiments/

Comments

  1. Thanks for the Google html5-demos presentation tip, great resource.

    David Anastasi - 06 Apr 2012

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>