HTML 5 Highlights
Wednesday, August 5th, 2009New Features Supported: Structural Tags
New Features Inconsistently Supported: Canvas Offline, Native Video, Geolocation APIs
Doctype is now a simple <!DOCTYPE html>
Common structural divs are now their own tags.
Here are the self explanatory ones:
<div id=”header”> is now <header>
<div id=”nav”> is now <nav>
<div id=”footer”> is now <footer>
Tags that need a little clarification:
<section>
According the HTML 5 spec, a section is a thematic grouping of content, typically preceded by a header tag, and followed by a footer tag. But sections can also be nested inside of each other, if needed.
<article>
WHATWG notes, the article element should wrap “a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.”
You can have more than one article tag on a page and each article can also be broken into sections using a section tag. This is very similar to how CMS systems like Joomla specify content but be careful when planning you structure in HTML 5 so as not to create a tag sea.
<aside>
Text in parentheses, annotations, pull quotes, inline footnotes or sidebar content would all fall under this tag.
Making it compatible with older browsers
If you need to support legacy browsers you need a fix because they won’t apply CSS to them. To fix it you need to apply some JavaScript using the createElement method and add it to the head of your HTML 5 file. Don’t worry about specifying the MIME type because in HTML 5 all scripts are assumed to be type=”text/javascript” which means there is no need to waste your time with attributes anymore.
<script>
document.createElement(‘header’);
document.createElement(‘nav’);
document.createElement(’section’);
document.createElement(‘article’);
document.createElement(‘aside’);
document.createElement(‘footer’);
</script>
To learn more about HTML 5 features and to see it in action check out HTML 5 Gallery
