How Your Pages Should Be Laid Out

by Curtiss   |   last updated September 15, 2009   |   Web Tutorials ·

This is intended to be a quick tutorial explaining how you should lay out your HTML pages to ensure that your site works properly for all visitors and search engines. This tutorial assumes that you already have a general knowledge of HTML and CSS.

Your document should begin with the head section, followed by the main content of your page, then any navigation menus you want included. Finally, at the bottom of your document, you should include any javascript files and functions that need to be present.

Head

As you know, at the very top of your HTML document, you need to have the “head” section. The head section includes various information that tells the browser how to render your page and provides search engines with important information.

The head section of your HTML document should include the following items:

• Title – There is a lot of debate over whether your title tag should reflect the main header shown on your page or not. However, one thing is absolutely certain: you need to have a title tag in the head of your document. For what it’s worth, I’m in the camp that believes the title, the main header and even the navigation link (where possible) should all be the same. Otherwise, you run the risk of confusing your visitors.
• Meta description – This should be a short summary or excerpt of the page that’s displayed in various search engines.
• Style definitions – You should include all of your CSS style definitions in the head of your document. Ideally, the actual definitions should be included in an external style sheet, and “linked” in the head of your document.
• Meta keywords – The validity of meta keywords is very often debated, but the bottom line is, as long as the keywords are genuinely related to the content on your site, they can’t hurt.

The head section is also where you would define your “favicon” (the icon shown in the browser when the site is bookmarked), alternate links (for instance, to the related RSS feed), etc.

Quite often, you will find Web sites that tell you to put javascript includes in the head section of your document. However, a page will not continue loading until it has loaded and executed any javascript code. Therefore, if a javascript function is executed within the head section or even at the top of the body section, none of the content on your page will load until it’s finished. However, if you place your javascript at the bottom of the page, your visitors can use the page even if the javascript is slow to load.

Body

The other logical section of an HTML document is the “body” section. This is basically the section of the document that is shown in the browser.

The first item found in your body section should be some accessibility links to make it easier to skip to the major sections of the page. For instance, if you have a main navigation menu that repeats on every page, a main content section and a navigation menu that’s related to each specific page, you would include three links; one that leads to each of those three sections. Most of the time, you can hide these links with CSS so that they don’t have to actually be a part of your design.

Next, you should code the content of your page. After the content should be any navigation items that are specific to this page. You can place your footer after the page navigation menu. After that, you should code the header of your page and any navigation menus that are repeated on every page. Finally, if there is any javascript that needs to be included in your document, put that just above the closing body tag.

Styling Your Layout

You may be looking at the information I provided above and wondering why the header of your page is the last thing in the document. There are two reasons:

1. When pages load, if anything gets held up or stops the page from loading completely, your visitors will at least be able to see the content of the page.
2. When visitors come to your page using a text-only browser or a screen reader, having headers and navigation menus repeat at the top of each document becomes extremely tedious.

However, a page would look awfully silly if it was rendered with the header at the bottom of the page, so you need to use CSS to rearrange things. Here is one method to do so, but I’m sure you can find plenty of other examples online.

HTML

Following is a barebones HTML layout. It does not include the correct doctype definitions, content-type declaration, meta tags or anything like that, but it should give you the general idea.

<html>
<head>
<title>This is your page title</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>

<body>
<div id="skiplinks">
<a href="#content">Skip to content</a>
<a href="#headnav">Skip to main navigation</a>
<a href="#secnav">Skip to page navigation</a>
</div>

<div id="maincontainer">
<div id="main">
<div id="content">
This is the main content of your page.
</div>
<div id="secnav">
This is a left navigation menu.
</div>
</div>
</div>

<div id="footer">This is your footer, where you would put copyright information, etc.</div>

<div id="headcontainer">
<div id="header">
<img id="logo" src="logo.jpg" alt="Your Company Name and Tag Line" />
<div id="headnav">
This is your main site navigation menu (Home, About, etc.)
</div>
</div>
</div>
</body>
</html>

CSS

Following is the CSS you would use to arrange these items. To use this method, you have to assume that your header area is a fixed height. In this instance, I’m also using a fixed-width layout.

body {
margin: 0;
padding: 0;
}

#skiplinks {
width: 0;
height: 0;
overflow: hidden;
padding: 0;
margin: 0;
}

#headcontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden;
padding: 0;
margin: 0;
}

#header {
width: 760px;
margin: 0 auto;
}

#logo {
width: 500px;
height: 75px;
margin: 0 auto;
padding: 0;
display: block;
}

#headnav {
width: 760px;
height: 65px;
margin: 10px 0 0 0;
padding: 0;
}

#maincontainer {
width: 100%;
margin: 150px 0 0 0;
padding: 0;
}

#main {
width: 760px;
margin: 0 auto;
padding: 0;
}

#content {
width: 550px;
padding: 5px;
float: right;
margin: 0;
}

#secnav {
width: 190px;
padding: 5px;
float: right;
margin: 0;
} 

#footer {
width: 100%;
text-align: center;
} 

The key to this stylesheet is the absolute positioning of the header area. The content can have a fluid height, as we are simply pushing it out of the way with the margin-top property, then sliding the header area into that spot. Everything else in the page flows naturally.

I hope this gives you an idea as to how your pages should be laid out and how you can accomplish that goal.