How to create A Simple One Column Layout with HTML5

The easiest layout to implement with CSS is a one column layout. This is just a series of boxes stacked one on top of the other. We'll have a Header area, a horizontal navigation menu, an area for the contents of the page, and finally a Footer. The layout we'll design looks like this:



As you can see, it's fairly straightforward: Header area at the top, navigation bar, page content, then Footer.

The first thing to do is the HTML. The CSS can then be added on top of this.

Have a look in the templates folder that you download with this course (extra_files/templates). (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)

Open up the template called template_one_col.txt. You should see the following HTML:



There are quite a few tags here that you haven't met before. These tags are new to HTML5, and are not present in previous versions. They are:

HEADER
NAV
SECTION
ARTICLE
FOOTER

In previous versions of HTML you just used the DIV tags in place of the ones above. The new ones are called Semantic tags. They don't actually do anything by themselves - they are just there to make things clearer for you (and perhaps search engines). If you use DIV tags for everything, then page code can get very messy and confusing.

Let's have a look at our code, though.

Starting at the top, we have a HEADER tag:

<HEADER>

<H1>Top Header</H1>

</HEADER>

The HEADER tag is not just at the top of the page. If you look further down the page you can see that we have another pair of them:

<HEADER>

<H2>Section Title</H2>

</HEADER>

The HEADER tag should be used when you want a nice heading for different sections of your page. Our first HEADER is for some H1 text. Since it's at the very top of our page, however, we could replace the H1 tags with, say, an image to use as a site banner.

Our second HEADER is surrounding a pair of H2 tags. This could be the title of an article that we want people to click on.

After the top HEADER tags we have a pair of NAV tags. These are surrounding an unordered list that we want to use as a navigation bar. Previously, we had DIV tags surrounding our unordered list. Now, it's much clearer what this list is being used for.

The next Semantic tag is SECTION. We have two pairs of these. The first pair are at the top and bottom of the page:



These SECTIONS tags hold the main content of the site.

In between the first pair of SECTION tags we have an ARTICLE tag. As the name suggests, these are used for when you want to separate an article of text from the rest of your site. You may well have more than one article, in which case you can use another pair of ARTICLE tags. Like this, for example:



Here, we have two articles on the page. Each pair of ARTICLE tags has a HEADER and a SECTION. The HEADER tags have been turned into hyperlinks, while the SECTION tags are used for the headline of the story.

Save your template as a HTML file. Save it in a new folder called layouts. For the file name, type layout_one_col.html.

When you load the page in a browser, you'll see this:



Because we used only HTML tags the page looks quite basic.

One last thing to do before we get to the CSS. Add the following ID attributes to your HTML code:



So there are five ID attributes to add, highlighted in bold above. (Incidentally, these can be CLASS selectors rather than ID selectors, if you prefer. Using ID means that you can refer to them in a scripting language like JavaScript, as well as using CSS.)