Create a basic HTML5 layout - Riad Kilani

Setup your page

HTML5 opens up new wonders to the world of the web. Now with browsers pretty much fully supporting HTML5 and CSS3, we can move to the next step of the world wide web by using these awesome languages. What we will cover here is a basic HTML5 layout using HTML5 shiv, header, nav, section, aside, article and footer tags. If you want to see how to style your fresh layout, I will have a second part to this that will cover basic styling. So let’s get started!

HTML5 shiv please

One of the key components that gets HTML5 recognized and working in all browsers is the HTML5 shiv. When called in your header, you can rest knowing that HTML5 will function without any issues.

[sourcecode language=”html”]

[/sourcecode]

The HTML5 head

First thing that we need to do is setup our header. To do this, open up your favorite text editor,create a new page named index.html and put the HTML5 doctype along with these other needed tags for HTML5 to work across all browsers.

[sourcecode language=”html”]

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<title>Page Title</title>

</head>
[/sourcecode]

The header

In XHTML, when we were laying out our pages, we used Divs to create our layouts. This was great, but there was no real structure with this. Those days are far gone now with the use of the header tag. Now we can structure our pages and have a complete semantic layout that make sense. The best part of this is, the header tag could be used in any part of the page! So we will now start to structure the rest of the page.

[sourcecode language=”html”]

</header>

[/sourcecode]

The nav

Just like in XHTML and CSS, your navigation could be either horizontal or vertical. This really all depends on the design that you have come up with. For this tutorial here, we are going to use horizontal navigation. It is always a good idea to set your navigation up by using a list, and that is exactly what we will do.

[sourcecode language=”html”]
<nav>

<ul>

</ul>

</nav>
[/sourcecode]

Your main content

Now it comes time for our main content. Again in the old day’s we used (div id=”mainContent”) as a way of structuring our page. Now we have a great tag called the section tag. The section tag is used to contain content that usually is not going to be on other pages. For example an “about” section probably won’t be used a second time in the site. So we would use something like (section id=”about”) to put the content.

To take a side step real quick, there is also another new tag called the article tag. The article tag is used to hold content that would be reused throughout the site like blog posts or news feeds. Often, you will see article tags inside of section tags. It’s a little confusing at first, but once you start using the tags, you’ll catch on quick.

[sourcecode language=”html”]
<section>

<h1><a href="#">Page Title</a></h1>

<p>Your main content text will go here.</p>

</section>
[/sourcecode]

Aside, the new sidebar

The aside tag is used to put secondary content on the page. A perfect example for this would be a sidebar. The aside tag can also be used within any part of the page. An example for this would be a related posts section inside of the main content area. Again, the more you use it, the more familiar you become with it. Now, we will use it as a sidebar. For me personally, I like formatting content inside of the side bar in a list.

[sourcecode language=”html”]
<aside>

<ul>

<ul>

</ul>

</li>

</ul>

</aside>
[/sourcecode]

Finishing with the footer

For the final part of our layout, we will be using the footer tag. The footer tag is exactly does exactly what it’s name say’s. Again, the footer tag can be used anywhere as long as the semantic structure is followed for it. For example if you have a module in a page that has a header, section and footer, it is ok to use it.

[sourcecode language=”html”]
<footer>

</footer>
[/sourcecode]

Name those tags

When it comes to styling, it is good practice to give your tags id’s and or classes. So we will go ahead and do that now to get our layout ready for some style. Start with the header and repeat for the remaining tags.

[sourcecode language=”html”]
<header id="mainHeader">

</header>
[/sourcecode]