20Feb2011

The HTML5 Page Structure

How To Structure Pages Using The New HTML5 Elements

As HTML5 is now being implemented by webmasters all around the web I thought it only appropriate to cover some of the new elements and page structure basics here at Basewebmaster. Particularly as many of the websites demonstrating the HTML5 structure appear to have misunderstood how the new structural elements are used.

Effectively the basic structure of a HTML5 document has not changed. Each comprises of a head section containing unseen details and links and a body section where the visible elements of the document reside.

Firstly lets take a quick look at the head section code shown below.

HTML5 Document

<!DOCTYPE html>
<html lang="en-US">

<head>

<meta charset="utf-8" />
<meta name="keywords" content="key, words" />
<meta name="description" content="description" />

<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="alternate" title="Website Feed" href="rss.php" type="application/rss+xml" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />

<title>Page Title</title>

</head>

DOCTYPE

The doctype as you can see is much simplified in HTML5 as there is only one type of HTML document it is simply defined as <!DOCTYPE html> simple as that. Nothing more is needed to define the doctype.

HTML Element

We now need to open the html element <html lang="en-US"> notice that the language attribute is added to the html tag. This is adequate to show that the whole document is written in English so the language attribute does not need to be added to each element. The exception would be if you whished to show and alternate language within the body of the document.

For example if you were to provide links to the document in alternate languages you may wish to show those links in the native language and therefore the lang attribute should be applied to that element and would override the document root language.

The html tag is also the place to add the dir attribute if needed, either ltr or rtl. By default ltr is used so it is down to your own usage whether you define this attribute or not.

Head Element

Now we open the head section of the document. Much remains unchanged; in fact we have not added any elements to the head section simple removed unnecessary ones.

Meta Data

We have no need for any meta data relating to content type as we have already define the doctype to HTML5. Neither do we need any language declaration as we have added that to the html base element. The only metadata that is recommended is a charset declaration, meta keywords and meta description as shown in the example.

Links / Scripts

In terms of any link or script elements nothing much has changed regarding the way they are shown, just make sure they each have the necessary rel attribute and type attribute attached.

Finally the title element remains unchanged and functions as it always has. That is the head element, of course there are many other things you can add to the head section particularly different link elements used by various search engines and user agents. For the purpose of HTML5 however the above is the basic structure.

The Body Element

Now on to the body element, all content i.e. visible parts of the document should be placed within the body element; this at least has not changed in HTML5. The main modification to the body element is with the addition of a number of new elements unique to HTML5 and the way the page is effectively divided into sections.

They have been added to make the mark-up of a document easier and supposedly more intuitive. So instead of having loads of div and span elements you will now have a more appropriately named element to contain various type of content.

Okay so first of all lets take a look at the new elements along with their technical definition and defined place or place's of usage.

The header element represents a group of introductory or navigational aids.

Header elements relate to the sections under which they occur, if they occur as direct descendants of the body element then they apply to the document as a whole.
They are not limited to h1-h6 elements in fact they can contain almost any content you wish as long as it is appropriate heading data.
A document may contain as many headers as you like but they should be limited to one per sectional container.

nav

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Nav elements relate to the sections under which they occur, if they occur as direct descendants of the body element then they apply to the document as a whole.
They may contain heading and text as well as links.
Navigational elements should be used to identify large blocks of navigational data, they are not needed for smaller navigational displays.

article

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Article elements contain the documents or page specific content of that specific document. For a blog the article tags would surround the blog post itself. For a forum the article would comprise of the initial post with subsequent posts / replies nested within it.
Multiple article element are allowed either nested within one another or independant from each other. If independant from each other this would imply that the article elements contain content which would be self supporting i.e. content contained within the other article elements is not neccessary for understanding.

section

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Section elements are used to group similar content into a block, as such all content within a section element should be directly related.
Section elements are considered as seperate sections of a document and therefore should contain their own header data.
Should not generally be used to contain the main body of a document as this is what the article element is for, may be used to break up a document into topical sections.
Best used as a container within an article element to group common themed content e.g. The comments section of a blog should occur within the main article element but would best be contained within a specific section element with an appropriate heading such as comments.

aside

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Aside elements should contain content which is very loosely or unrelated to the main theme of the element in which they occur and the elements arround them.
Within a blog aside elements may for example contain the side bar links to various other blog posts.

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Footer element should be used based on what they will contain not where abouts within a documnet they occur. Footer elements do not need to be at the foot of a document they simple need to contain appropriate information about the document or section.
multiple footers are allowed, one for each sectional container is acceptable.
For a blog page the contact and copy write data at the bottom of the page would be within a footer. Also the author and date published for the blog entries, often positioned just beneath the blog heading would also be a footer.

Basic HTML5 Structure

Below is a mock-up page to show how each of the above defined elements might be put together. This is a basic HTML5 page structure and may be used as a template to which your documents can be modeled. Imagine that the grey border around the outside represents the body element with the various HTML5 elements as descendants of it.

So lets work through the above structure. It is only a guide but illustrates the basics quite well.

Firstly we have a header, this is a document level element and therefore applies to the whole document. This would contain the website name, any tag line or phrase and any logo that the website might have.

Next is the navigational element, again this is a document level element and therefore should contain only the main navigational links. This is basically where you would put your main navigation block.

The article element holds the main content of the page, it could be a blog entry, news article or forum post. Within the article element shown above there is also a header and footer which would be directly associated with the article element only. Additionally there are two section elements which could contain, tools, resources or comments, really anything seperate from the main content but still related.

Now notice that the right hand side bar has been created using a good old fashioned div container, this has been added to help style the document and it is important to understand that it is not included when we think about the semantic structure of the document.

So in terms of document structure the aside elements are document level, they would both contain items which would you would terms as unrelated to the main subject of the page and to one another. They may contain thing like a previous blog entries or articles.

Finally we have the document level footer element which in general will contain all your site wide footer information, like copyright terms links to sitemaps or terms and conditions.

That really is about it for HTML5 and the basic page structure. As always any question let me know via the comments section below.

Tools, Resources And Links

HTML5 Editors Draft - Take a look at the most recent spec regarding HTML5 from the W3 development team, its an epic.
Top Online Documentaries - Shameless promotion of what I think is one of the best documentary sites around.