Header Ads

Cooking With HTML 5 : Tutorial

As users, it doesn't really matter to us how the sites we visit are built. Overused divs, tables for layout — who cares, as long as the sites look and work fine? As developers, though, it all matters. And as the web becomes increasingly aware of semantics — the context of content — it also matters that we build pages that the search engines understand. And that's why there's HTML 5.

HTML 5 gets a lot of press for one feature alone: the tag, which lets you embed Ogg video into pages, without needing plugins like Flash or Silverlight. That tag, however, is just part of a much bigger design — to make the tags indicative of what the pages contain.

Tagged right

Most web pages you'll visit have a layout that looks something like this:
<div id="header">
<!--your page header and logo go
<div id="nav">
<!--your navigation links go here-->
<div id="content-area">
<div class="article">
<h2>This is a heading</h2>
<p>This is some text.</p>
<div class="article">
<h2>This is another heading</h2>
<p>This is some more text.</p>
<div id="sidebar">
<!--your sidebar information goes
<div id="footer">
<!--your copyright and contact
information goes here-->
Pretty standard stuff, that. The problem, however, is that divs don't really ~mean~ anything. They tell the browser that they're distinct areas of the document with "stuff" inside them, but that's it. With HTML 5, however, we get structural elements that actually tell us what's inside:

The <header> element to put all introductory information, like your logo, a brief description of the page, and so on. You can also use these as content headers, which can contain the title.

The <nav> element, to put your primary navigation links in.

The <section> element, to segregate your content into chapters, categories, or anything similar.

The <article> element, where you can stick your primary content.

The <aside> element, where you can put stuff that's tangentially related to the content around the aside element, and which could be considered separate from that content, according to the W3C. This means sidebars, pull-quotes, and other such content that isn't part of the main flow.

Finally, the <footer> element, where you can put copyright notices, contact details, and so on. Like <header>, you can also use this for article footers — date published, number of comments, and so on.

As you can see, the new tags make much more sense — both when you're creating a page, and if you have to edit a page someone else created.

Putting it together

Now that we've got new tags to work with, we can set about rebuilding our page, starting with the easiest bits. The header is simple enough:
<header class="mainhead">
<h1>This is the page header</h1>
<li><a href="somewhere.
htm">Navigation 1</a></li>
<li><a href="somewhere.
htm">Navigation 2</a></li>
<li><a href="somewhere.
htm">Navigation 3</a></li>
It's not absolutely essential to have the navigation links within the header, but since they are an "introduction" to what's on your site, it makes sense to put them there.

The other simple element is the aside:
<li><!--a calendar widget--></li>
<li><!--an archive widget--></li>
This is a very WordPress-like sidebar, with widgets in an unordered list. You can use divs too, if you like.

There’s also the sections:
<section id="articlesnippets">
<article class="snippet">
<!--article preview goes here-->

HTML5 Canvas Sheet Sheet ( Click Image To Enlarge )

...and so on. If you use the HTML 5 elements the way you would divs, you're on the right track.

Articles of interest

HTML5 Support ( Click Image To Enlarge )

Apart from the obvious <article> element, HTML 5 gives us several other elements to add richness to content. The first is <hgroup>, which lets us group headings (for the benefit of search engines, which would see ungrouped headings as separate content items):
<article class="full">
<header class="article-header">
<h1>This is the main heading</h1>
<h2>This is the subheading</h2>
<!--article content goes here-->
If you have images within the content, you can use the
element to show it — adding more significance to its purpose:
<figure id="figure-1">
<legend>This becomes the figure's
<img src="image.jpg" alt="Remember
that ALT text is now mandatory"/>
This doesn't have to be limited to images — just replace the <img> with <audio> or <video>, and you've got yourself captioned audio or video.

There are a bunch of little additions for your content, too — use the <mark> tag (or <m>; the spec is still undecided on which) to highlight text that you think is significant (you can use CSS to decide how that looks):<p>This was a triumph. I'm making a note here: <mark>HUGE SUCCESS</mark>.</p>

You can also mark off time (<time>), or other units (<meter>):<p>I made <meter>Rs. 300</meter> at <time>10:15 AM on August 5</time>.

But this is just the boring, utilitarian part.HTML 5 enables much coolness, as well.

Mr Fancy Pants

Another one of HTML 5's talked-about features is the <canvas> element. It conjures up images of a large, editable area that users can draw on, but that's hardly the case. By itself, the <canvas> element is not much — it needs JavaScript to really get it to do something. And that something could potentially be a Flash-killer, if this demo combination of Twitter, <canvas> and <audio> is anything to go by: http://9elements.com/io/projects/html5/canvas/.

Let's try a basic canvas demo for ourselves. It's simple enough to create a blank 200x200 canvas to start scribbling on:
<!DOCTYPE html> <!--no more fancy
<title>Canvas Demo</title>
<body onload="drawSomething();">
<canvas id="test" width="200"
The drawing part comes from JavaScript. The only shape you can draw directly on a canvas is the rectangle; everything else must be drawn using paths, lines or curves. We won't go into all the possible functions here, but here are some of the basics:
  1. fillRect(x-position,y-position,width,height): for a solid rectangle
  2. strokeRect(x-position,y-position,width,height): for just the outline
  3. clearRect(x-position,y-position,width,height): to delete the area under the rectangle
  4. beginPath(): start drawing a path
  5. closePath(): stop drawing
  6. stroke(): closes the path, and draws the outline
  7. fill(): closes the path, and turns it into a solid shape
Once you've begun a path, you've essentially enabled a pencil (or pen, or marker, if you want), which you can command to do what you want:
  1. moveTo(x,y): move to this point without drawing
  2. lineTo(x,y): draw a line from the current position
This is all we'll use for now. Like any other JavaScript, you can put the code within the <script> tags. Here's what the drawSomething() function looks like:
function drawSomething()
//get the canvas
var canvas = document.
//now get it for drawing
var board = canvas.
//create a filled rectangle
//draw a random shape
board.fill(); //closes the shape
And here's the result:

This is just to give you an idea of what you can do with canvas; if you're up to it, you can go over to Mozilla's excellent canvas tutorial for more: https://developer.mozilla.org/en/Canvas_tutorial.

There are several other neat features, too, including support for drag-and-drop. You can make any element draggable by simply adding the draggable="true" attribute, and then use JavaScript to handle the result of someone actually dragging the element.

Now, make it work

There’s a lot more HTML 5 than our page count will permit, but a good question arises at this point: "Will it work in all browsers?" A large portion of the HTML 5 spec is supported by the latest browsers — Firefox 3.5, Safari 4, and Opera 10 beta — so you can actually create a complete HTML 5 site and have it work normally for any visitors who don't use IE. For IE users, you'll have to include the HTML 5 Enabling Script thus:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Or, you could just tell them to stop using IE, and we'll all be happy in our HTML 5-enabled world.