Coding A HTML 5 Layout From Scratch : Honey Vig Web Developer Ajax,Jquery, ASP, PHP, dotNET

Saturday, November 12, 2011

Coding A HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.
While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.
So today we’re going to experiment a little with these new technologies. At the end of this article you’ll learn how to:

Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.
Use HTML5 alongside a rising technology: Microformats.
Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

I’ll also assume you know the basics of HTML and CSS. Including all the “old school” tags and the basic selectors and properties.

Before we begin…

There’s a couple of things you have to bear in mind before adventuring on the new markup boat. HTML5 is not for everyone. Therefore, you must be wise and select how and where to use it. Think of all the markup flavours you’ve got available as tools: use the right one for the right job. Therefore, if your website is coded in standards compliant XHTML strict there’s no real need to change to HTML5.
There’s also the fact that by using HTML5 code right now your website gets stuck in some kind of “limbo” since even though your browser will render HTML5, it does not understand it as of yet. This may also apply to other software such as screenreaders and search engines.
Lastly you must consider that HTML5 is still under heavy development, and it’s probably the “most open” project the W3C has ever done. With the immense amount of feedback and all the hype around it, the current draft is bound to change and it’s impossible to predict how much.
So if you’re ready to do the switch, are not afraid of using technology that in the near future will be way more meaningful and can easily change whatever piece of code that might get broken, then keep reading.

A word on Progressive Enhancement and Graceful Degradation

So what are these two terms all about? Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer. That is Graceful Degradation in the practice.
Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling. That is Progressive Enhancement in the practice.
Both technologies usually go hand in hand and have been part of the ways we do things for years. It’s just the terms that are not that well-known. And now, both of these practices need to evolve due to the new languages that are approaching. If you want to go deeper into both of these terms, check a related article on accessites.org.

1. The Design

This will be the sample layout we’ll be coding:

A very basic layout brilliantly named Smashing HTML5! which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

2. The markup

As a very basic start to our markup, this is our html file skeleton:

01
02<html lang="en">
03<head>
04<meta charset="utf-8" />
05<title>Smashing HTML5!title>
06
07<link rel="stylesheet" href="css/main.css" type="text/css" />
08
09
11
13
16head>
17
18<body id="index" class="home">
19body>
20html>

A few highlights:

3 different Conditional comments for IE. First one includes html5 shiv code directly from Google Code for all versions of IE. The second one includes IE8.js for better backwards compatibility for IE7 and below as well as an ie.css file which will sove IE7 and below CSS bugs. Third one is just a CSS file to fix IE6 bugs.
The use of an “index” id and a “home” class on the tag. This is just a habit I’ve developed over the past year that has simplified the coding of inner-sections of overly complicated websites.
A simplified version of the charset property for better backwards compatibility with legacy browsers.
I’m using XHTML 1.0 syntax on a HTML5 document. That’s the way I roll. It’s a habit that I really like and since I can still use it, I will. You can, however, use normal HTML syntax here. That is, uppercase attribute and tag names, unclosed tags and no quotes for wrapping attributes’ values. It’s up to you.

This is a very basic and solid startup for all and any HTML5 projects you might do in the future. With this, we can start assigning tags to the different sections of our layout.
If we had an x-ray machine designed for websites, this would be our page’s skeleton:

The header

The layout header is as simple as it gets. The new

tag spec reads as follows:

The header element represents a group of introductory or navigational aids.

Thus it is more than logic that we use this to markup our header. We’ll also use the

tag. The spec reads:

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.

There’s a lot of buzz regarding the spec of the nav element since “major navigation blocks” is not a very helpful description. But this time we’re talking about our main website navigation; it can’t get any major than that. So after a couple of id’s and classes our header ends up like this:

01<header id="banner" class="body">
02    <h1><a href="#">Smashing HTML5! <strong>HTML5 in the year <del>2022del> <ins>2009ins>strong>a>h1>
03
04    <nav><ul>
05        <li class="active"><a href="#">homea>li>
06        <li><a href="#">portfolioa>li>
07
08        <li><a href="#">bloga>li>
09        <li><a href="#">contacta>li>
10    ul>nav>
11
12header>

Featured block

Next is the featured block. This is best marked up as an

since it’s spec says:

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.

That pretty much sums up our featured block, so let’s go for it. Now, inside of this block there’s a lot going on. Firstly, this is an article, so alongside the

tag, we should be using

right away.
We also have two consecutive headings (‘Featured Article’ and ‘HTML5 in Smashing Magazine!’) so we’ll be using yet another new element:
. This is a wonderful tag used for grouping series of tags which is exactly what we have here. It exist to mask an h2 element (that acts as a secondary title) from the outline algorithm, which will save developers some headaches in the future.
The last element on this block is the Smashing Magazine logo to the right. We have yet another new tag for this element: