HTML5 Template – Tutorial

Today we will be completing a simple HTML5 template to get our sites structure in place. If you haven’t already, check out our introduction to HTML5 tags and the HTML5 Workaround. If you have any questions please do not hesitate to make any comments below.

Following on from our previous article, we have completed a few snippets of code that show how to get HTML5 working in IE. Today I have created a very simple template that you can recreate to get a better understanding of how you can begin coding your sites. Below is the template I have created.
html5 layout HTML5 Template   Tutorial
To get start we should get an understanding of each element. The New elements that we will be using include the following:

  • header
  • nav
  • figure
  • aside
  • section
  • article
  • footer

Below are some descriptions of each element according to the spec:


A group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos.


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. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.


The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.


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 section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.


A composition that forms an independent part of a document, page, application, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget, or any other independent item of content.


The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

In the next article I will be taking you through the steps of creating your first template.

Related posts:

  1. A Simple HTML5 Template Tutorial
  2. HTML 5 Tutorial – Tags
  3. HTML 5 Tutorial – Workarounds
  4. HTML5 vs Flash
  5. Safari and HTML5

Tags: ,

Leave a Reply

Contact Us Today...

If you have any questions about our services or want to arrange a free no obligation consultation contact us today or call 02920 290 080 for Cardiff and 01179 000 482 for Bristol.

Bit Torrent Study Discovers Most File Sharers Are Now Monitored

Ever heard of torrents or used Bit Torrent to download movies, music or shared files over the internet? Researchers have discovered that anyone who does use Bit Torrent to download files over the World Wide Web will most probably be monitored. Studies were carried out by Birmingham University and they have discovered that if someone [...]
» more

Cardiff: 02920 290 080 Bristol: 01179 000 482