Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
HTML5 Page Structure
Introduction
In previous tutorials I have looked at what CSS3 will offer web designers in the not too distant future. As we all know, CSS deals with how your website displays to human visitors but what about the structural elements of a website and how, for instance, Search Engines (that don't follow the CSS styles) make sense of a page? This is where HTML 5 comes in.
What does HTML5 look like?
We are all probably familiar with this kind of page mark-up;
Web designers use the div tag to create the structure of pages and then apply CSS styles to them using an ID or class. HTML5 aims to make more sense of a website structure by replacing the div tag with more descriptive tag names. In HTML5 the above mark-up would look something like this;
As you can see from this example the header, nav, article, section, aside and footer tags used to create the site structure are far more descriptive than just using divs.
HTML5 tag breakdown
At this stage it is probably best to provide a slightly more detailed explanation of each of these new HTML5 tags.
| Tag | Description/Useage |
|---|---|
| Section | A section is a way of grouping content items that have some relevance to each other. Typically a section tag will be preceeded by a header and followed by a footer. For example a section may group together three articles on a page that are all about HTML5. Sectiona may be nested and can hold any other type of mark-up such as paragraphs, quotes, h tags etc. |
| Header | The header tag indicates the header of a section and is typically a headline. However, it may contain more information than you might put in say an h1 tag. For example; sub headings, version numbers or bylines. |
| Nav | For navigation elements. In most cases this will contain a styled, unordered list but it may hold flash or javascript driven navigation. |
| Article | An independant entry in a blog or other website. |
| Aside | Used to replace the traditional 'sidebar', an aside is not directly linked to the main content of the page and may well remain consistent throughout a website. This might include links, site sponsors, tweets or other sidebar type site content. |
| Footer | The place to put your website, business, copyright information and so on. |
Which doctype?
I will be the first to admit that doctypes hold a lot of confusion for me so, when I first saw the HTML5 doctype, I was very pleased indeed. It is;
<!DOCTYPE html>
HTML5 mark-up example
Here I have marked up a very simple website layout using HTML5 tags;
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<header>My Business</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="sales.html">Sales</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<section>
<article><p> Lorem Ipsum...</p></article>
</section>
<aside>Sponsored by...</aside>
<footer>My Website ©2010</footer>
Making the designer's life a little easier
Using HTML5 will also aid designers when it comes to identifying which opening div tag a closing div relates to. It is quite common to see comments mark-up in web pages to guide a designer as to which closing div tag relates to which opening tag. For example;
<div id="wrapper">
<div id="article">
<p>Lorem Ipsum...</p>
<--! article div ends here-->
</div>
<--! wrapper div ends here-->
</div>
With HTML5 the comments should no longer be needed as it is obvious which tag closes which element;
<header>Website Header</header>
<section>
<article>
<p>Lorem Ipsum...</p>
</article>
</section>
This is a very simplistic example but you should be able to see the point I am making. No more comments required to decipher complicated mark-up!
Can I use this now?
Unlike all good things coming to those who wait, HTML5 can be used today. Even IE6 and 7 can handle this new mark-up structure if some simple javascript is applied between the head tags of a page.
<script>
document.createElement('header');
document.createElement('section');
document.createElement('footer');
document.createElement('article');
document.createElement('nav');
document.createElement('aside');
</script>
It is also essential to remember that, as these HTML elements aren't 'official' yet they are displayed as inline elements. This can be overcome by applying display: block; in your CSS. As HTML5 becomes standard and the elements become naturally b;ock elements this can, of course, be removed.
Conclusion
HTML5 has been developed to make sense of website structure in a way that has not been seen before. The pioneers have taken the 'everyday' elements that we see in websites and given them a name and tag all of their own. In my opinion it is a good idea to start using HTML5 as soon as you can. One day all websites will be built this way so get ahead of the game and try implementing it on new site builds now.
