Final Tutorial: Coding an HTML5 Layout From Scratch

Ok... I know some of us are probably way past this stage. Maybe not... Since HTML5 is still developing there is possibly something in this tutorial that will be new to you. The reason I chose to do this tutorial is basically because I am still figuring out how to use HTML5 and what can be done with the tags. This HTML5 tutorial also includes some elements of graceful degradation and progressive enhancement. I've "borrowed" this tutorial I'm going to attempt to explain the steps for the HTML part in my own words for both yours and my own benefit. You can refer to the original for the CSS3 styling information. Just for the kicks, I've found a link to the W3C page which has all of the HTML5 tags. They've clearly labeled which ones are new and which ones are no longer supported.

So... When we're done with the tutorial our page SHOULD look something like this:



Here's the code sample we'll be working with:


If you broke the code down into a visual map of how it's laid out it would look like this:


Now... Let's start with the HEADER which is written in code as <. header .> .


The code for this section also includes the <. nav .> tag. The <. nav .> is the container where the menu is housed. Each navigational element is still coded as a <.ul.> or "unordered list" item You'll also notice the word "active" within the code. This is used to make a highlight over the word in the navigation menu that says which page you are on.

Beneath the coding for the HEADER is the FEATURED section. This area is coded as an <.aside.> which is a good place to put sidebar content (stuff that's related to the current topic but not specific enough to be in the main article) like fun facts or tips.


There's some coding in this "aside" section that I kind of understand but don't really know how to explain so here's a screenshot that may help:


Next, is the body content. This part is contained in a <. section .> tag. The "section" is "id"ed as "content" and "class"ed as "body". I believe the reason for this is within this article are several smaller articles which will have their posting dates and times attached. All of this activity in this block is made possible by using something called a microformat. A microformat allows you to put pieces of coding into place that record the time and date without you having to remember the exact time and date and write it in yourself. The specific type of microformat used here is called an hAtom microformat. You can read about those here: http://microformats.org/wiki/hatom Here's the coding sample for this part: I'm going to skip over the the "Extras" block (which is a <. section.> with two <. div .> tags within it; one div for the "blogroll" and one for the "social" networking links) and go to the "About" and "Footer" blocks. In HTML5, there is a new tag specifically for "footer"s: <. footer .>. A document can have more than one "footer" but "footer"s cannot be placed within one another or placed within headers. Within the <. footer .> you will usually find the <. address .> tag. This tag is used for making up the contact info for the page or document. It can contain physical/postal addresses or website URLs but they should only be the ones that link to the owner of the page or document. The <. address .> tag cannot contain < .article. >, < .aside. >, < .nav. >, < .section. >, < .header. >, < .footer. >, < .hgroup. >, any < .h1 - h6. > or other < .address. > elements.

The final code sample:



**P.S.: I put periods in the tags to help them show up as just plain text**

LINKS AND EXTRA STUFF:
The long form of this tutorial http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

More about microformats http://speckyboy.com/2011/01/24/beginners-study-guide-to-html5-microformats/

http://css-tricks.com/what-beautiful-html-code-looks-like/

http://webdesigneraid.com/essential-html5-books-and-cheat-sheets-to-improve-your-html5-ninja-skills/