BASEWEBMASTER

Brought To You By
Tomlin Ventures Ltd

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.

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.

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.

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.

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.

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.

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.

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.

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.

page structure

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

  1. HTML5 Editors Draft - Take a look at the most recent spec regarding HTML5 from the W3 development team, its an epic.
  2. Top Online Documentaries - Shameless promotion of what I think is one of the best documentary sites around.
Share to Facebook Share to Twitter Digg This Stumble It Share to Reddit Share to Delicious Technorati LinkedIn Google Buzz Blogger More...

blog comments powered by Disqus