Moving on from the previous tutorial Part 1: Creating your first hand coded web page! we are now going to work on actually putting some structure to your page. We are going to be using HTML5 which is the latest version of HTML to come out and comes with lot’s of new tags and features.

What is HTML5? (from Wiki)

HTML5 is a markup language used for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997)[2] and, as of December 2012, is a candidate recommendationof the World Wide Web Consortium (W3C).[3] Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsersparsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

To put that into plain English: HTML5 is the structure of our page. It allows use to give meaningful areas outlined in the code to different sections of the website. For example: we set one area as the nav and this is where we place our links to other pages.

Working from the code in our previous tutorial we are going to add a navigation, 2 columns for the content and a footer. In-case you haven’t read the previous tutorial I suggest you give it a read. Below is where we got to and includes new code for this tutorial.

New Code:

There’s lot’s of new code but don’t worry I will explain what everything does and why I have added it. We are of course writing HTML5 which is the latest version of HTML (still in development) but it is supported in all major browsers except for older versions of Internet Explorer (version 9 and lower). The first part that I added was a container. As the name suggests it contains all of our pages elements, navigations, text, images etc. The next part was the nav (short for navigation) which will be how users of the page go from one page to another. Inside the nav I created a ul (unordered list) and added 3 li (list item) tags and inside those I created anchor tags a (links).

I then created an article which will contain all the web pages content. That’s where we would place the content of the page. If we was building a recipe page then that’s where we would place the recipe and any related images.

The aside tag is the side bar where for example you could have related pages linked and maybe a input field for a user to sign up to your newsletter (we will be in the future building a program to handle that). I created again an unordered list with some list items and some links.

The last section is the footer which we wrapped with the footer tag (who would of thought hey). Inside the footer I created a paragraph and placed some pretty standard text.

That wraps up this lesson. Next time we are going to add some CSS3 and style and position the elements we’ve just added to give our website a nice clean look. I strongly suggest you type out this code by hand rather the copy and pasting for it to sink in properly.