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:
<body> <div id="header"> <!--your page header and logo go here--> <div id="nav"> <!--your navigation links go here--> </div> </div> <div id="content-area"> <div class="article"> <h2>This is a heading</h2> <p>This is some text.</p> </div> <div class="article"> <h2>This is another heading</h2> <p>This is some more text.</p> </div> </div> <div id="sidebar"> <!--your sidebar information goes here--> </div> <div id="footer"> <!--your copyright and contact information goes here--> </div> </body>
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:
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.
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"> <hgroup> <h1>This is the main heading</h1> <h2>This is the subheading</h2> <h3>Author</h3> </hgroup> </header> <!--article content goes here--> </article>
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 caption</legend> <img src="image.jpg" alt="Remember that ALT text is now mandatory"/> </figure>
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:
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:
fillRect(x-position,y-position,width,height): for a solid rectangle
strokeRect(x-position,y-position,width,height): for just the outline
clearRect(x-position,y-position,width,height): to delete the area under the rectangle
beginPath(): start drawing a path
closePath(): stop drawing
stroke(): closes the path, and draws the outline
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:
moveTo(x,y): move to this point without drawing
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. getElementById('test'); //now get it for drawing var board = canvas. getContext('2d'); //create a filled rectangle board.fillRect(40,25,50,30); //draw a random shape board.beginPath(); board.moveTo(10,10); board.lineTo(30,15); board.lineTo(20,50); board.lineTo(100,150); board.lineTo(30,150); 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:
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.
HTML5 Canvas Sheet Sheet ( Click Image To Enlarge )
HTML5 Support ( Click Image To Enlarge )
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.
Or, you could just tell them to stop using IE, and we'll all be happy in our HTML 5-enabled world.
TechQuark is a mobile-friendly website. Simply bookmark 