css layout with html5

HTML5 introduces a set of new tags that let mark up your content with better semantics. For example, instead of using meaningless divs like:

we can use these shiny new elements:

That's wonderful for semantics (making your code more easily understood by search engines and more interoperable with web services), but raises a problem - what happens when older browsers visit, who don't understand the new tags? After all, browsers simply ignore tags and attributes they don't understand, right? Fortunately, this problem is easily solved. A bit of Javascript called Modernizr knows how to detect these browsers and inject awareness of the new tags into the Document Object Model, or DOM (don't worry about it if you don't know what that means). Once present in the DOM, they can be styled with CSS just like modern browsers. That of course doesn't give full HTML5 functionality to older browsers - they still won't be able to use all features of HTML5 - but they will know how to "see" the new elements.

Rather than futz around installing Modernizr and setting up a workable starter template, we'll use an empty HTML5 "container" page from a service called html5boilerplate.com, which will get us off the ground. For this tutorial, we've packaged up a slightly modified version of the html5boilerplate along with our own custom images and a bit of Javascript we'll need in one portion of the tutorial.

→ Download tutorial files ←

Download that package and unzip it. Make sure you end up with a folder called "layout_tutorial". The folder structure you see inside should look like this:

    layout_tutorial
        css
            style0.css
            style1.css
            style2.css
            ...
        img
        js
        index0.html
        index1.html
        index2.html
        ...                
    

The numbered html and css documents are linked to each other. As you work your way through this tutorial, you can either:

1. Stay in index0.html and style0.css the whole time, copying and pasting updates, working your way up to a finished product
2. Switch between files progressively (index1.html, then index2.html, etc.), studying the changes along the way

The first method is a bit more hands-on, but some readers will find that it's easy to make mistakes. The second method is more fool-proof, but possibly a bit less educational since you won't be actually making the changes yourself.

I'll list the page version at the top of each tutorial section in case you want to use method #2. From here on, I'll just refer to index.html or style.css - it's up to you to determine whether you should be in a numbered file or are working on your own.

To get started, open up index0.html and css/style0.css in your favorite text editor. If you use TextMate for Mac, just drag the whole tutorial folder onto the TextMate icon.

Now open up the same HTMl document in the browser of your choice (pull down File | Open and navigate to the HTML document we're currently working on. You'll see a blank document - that's OK.

We're not going to make any changes in this step - just take a look around to familiarize yourself.