HTML5: Simple Website Layout Tutorial Using HTML5

24 Oct 2012

7

This tutorial will give you a basic insight into a website designed using the HTML5 syntax. There are a few sections involved in this tutorial including the tags we will be using and the CSS so it will render properly within a browser.

This tutorial will be the basis of the other tutorials related to HTML5 on this site, so if you are unfamiliar with HTML5 this tutorial should be the first you read.

As we go through the different sections of the layout I will give you examples of the code and a simple description about what the area is and how to use it.

The areas we will be focusing on will be the Doctype along with the CSS and the header, hgroup, nav, aside, section, article, and the footer elements.

<!doctype html>

As discussed in a previous tutorial on Doctype Declarations we discovered that there are different variations of the doctype declaration. For this tutorial we will be using the HTML5 doctype, which has been broken down to its bare bones, and should always be the first thing to include at the very top of the webpage.

CSS

The CSS is pretty much the same as version 2.1 apart from it is essential that you have the HTML5 elements displayed as blocks eg. header, hgroup, nav, section, article, aside, footer {display: block;}, we do this so the browser knows that the HTML5 elements should be rendered as blocks by default. When styling the HTML5 elements you will notice I haven’t used an id prefix (#) or a class prefix (.) they are simply not needed anymore for these specific elements, you may wish to add extra styling and in that case you can add an id or a class within the tag in the usual way ie.<header class="random">.

I have left out all the usual suspects (html, body, h1, etc…) and concentrated on just showing you the HTML5 tags, for the purpose of this tutorial they are not needed. If you do miss them check out the demo as they have been included there.

<header>

The header element can be used in two ways, it can be used as the web page header which is viewed at the top of an entire page or it could be used at the start of a section. You will usually see this element used as a container for a heading or a subtitle using the h1-h6 elements, however this element could contain more than just the sections heading, in this instance I will be adding hgroup and nav elements.

The example above demonstrates how the header element is used effectively with the hgroup and nav elements for a web page header.

<hgroup>

UPDATE: As of April this year (2013) the hgroup tag has been classified as obsolete and will not be supported, by the W3C, in this and further versions of HTML5

The hgroup element represents the heading of a section and is mainly used with titles or sub-titles. The main elements you will see within this area are the h1-h6 elements.

The example above demonstrates how the hgroup element is used to provide the user with a title.

<nav>

The nav element is where navigational links will be found meaning the links that you want the user to navigate around your site with. Not all links will need to be within a set of nav elements, just the most important ones.

The example above shows us how the nav element is used to give the user an array of links to choose from.

<aside>

The aside element represents a section of the web page that is associated to but not directly related to the main content. It is a different article along side the main content, it could be classed as a sidebar in certain blogging/WordPress sites.

The example above uses the aside element to show the user a brief article using a heading and a short paragraph.

<section>

A section defines a different area of a web page. It is used to group content with a header and depending on your preference a footer. An example of this could be the chapters in a book. For example, my ‘about me’ page is split down into three main area of information, I have the main biography which is one section, another is my skills and the last is other information. All these sections have a header with a title, an article for the main content and a footer just to finish off that area.

The example above shows us how the section element is used with the article element with a hgroup title and a short paragraph.

<article>

This element is used for the body of text the user will see on your website. This is usually contained within the section element but is by no means required to work properly. The article can be used for many things including a users comment or part of a forum post.

The example above features the article element with a hgroup title and a short paragraph.

<footer>

As with the header element this can also be used in two ways. It can be used as the footer of an entire page or it can be used as the footer of a separate section within the page.

The example above shows the footer element with a short paragraph.


Written by:


This entry was posted in HTML and tagged , . Bookmark the permalink.

7 Responses to
HTML5: Simple Website Layout Tutorial Using HTML5

  1. Very nice and simple understandable layout for Html5 Beginners…

  2. Very nice and simple understandable layout for Html5 Beginners

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">