HTML Layouts

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts</title>
<style type="text/css">
main {
	width:100%;
	height:200px;
	}
header, footer {
	background-color:#BCCE98
	}
article, nav {
	height: 100%;
	float: left;
	}
article {
	background-color:#F7FDEB;
	width:70%;
	}
nav {
	background-color:#DAE9BC;
	width:30%;
	}
</style>
</head>
<body>
	<main>
	  <header>Header...</header>
	  <nav>Nav bar...</nav>
	  <article>Article...</article>
	  <footer>Footer...</footer>
	</main>
</body>
</html>

Above is an example of an HTML layout using CSS to position the elements. This layout uses elements that were introduced in HTML5—in particular, the <main>, <article>, <nav>, <header>, and <footer> elements.

The styles have been applied using the <style> element in the document's <head> element.

So as you can see, there are a number of HTML tags that have been provided specifically to assist with page layout. But remember that these are merely logical containers that provide meaning for the content inside them. These HTML elements don't actually determine the visual layout—size, position, etc. That's the job of CSS.

Classes & IDs

Although we haven't applied any classes or IDs to the above HTML5 elements, it's normally a good idea to do so. After all, an element could be included on a page more than once, and things could get messy if they're styled using the same layout styles.

For example, we could have two <nav> elements on a page. One could be the global navigation, the other could be the local navigation. While both <nav> elements could share some styles, they probably won't share all styles (due to their different positioning on the page). Therefore, we could give each of these an ID (or class) in order to distinguish between them. An appropriate ID or class name also distinguishes them logically, giving each element its own meaning.

Also, using IDs can be useful when incorporating JavaScript into your pages. If you have a menu that relies on JavaScript, it's quite possible that you will need to add an ID to your menu.

Here's an example of two <nav> elements, each with its own ID:


<!DOCTYPE html>
<html>
<head>
	<title>HTML Layouts</title>
	<style type="text/css">
		nav#global {
			...
			}
		nav#local {
			...	
			}
	</style>
</head>
<body>
	<main>	
		<nav id="global">
			...
		</nav>
		
		<nav id="local">
			...
		</nav>
		
		...

Layout Templates

There are many different ways to create website layouts. The above example is simply one of these. CSS provides a number of properties that assist with layouts.

It's outside the scope of this HTML tutorial to go into too much detail here, but if you're interested in creating different layouts, check out these HTML templates and click View Source Code to see how each template has been built.