With all the buzz and hubbub surrounding HTML 5, the web community has been pretty slow in adapting the next iteration of the HTML language. Yes, there is a growing selection of websites written in HTML 5, but it seems that most of them are websites about HTML 5. I think it’s time for web pros and amateurs alike to stop cautiously testing the water by creating HTML 5 canvas element demos and to start using HTML 5 markup in all their projects. The markup is supported fairly well in modern browsers and with the addition of some clever JavaScript will even work on IE 6.
If we want this standard to catch on, then there is no time to waste; let’s all start using it. I can’t wait for the day when all the buzz-word perpetuators simply call this language “HTML” again.
To help some of you get up to speed, I’ve written up a breakdown of the most common new elements.
Basic HTML 5 Bestiary – Some New Elements
Some of the new tags take a cue from magazines and print, in their meanings. This presents us with some interesting semantic interpretation, as well as new and more convenient ways to style pages. No more fussing about with semi-meaningful id attributes when there are lots of purpose-specific tags to use.
<!DOCTYPE html>Finally a doctype designed for humans to remember. Those of you who used XHTML probably are familiar with its doctype, which looked like it was randomly generated by a computer from the 80′s. Memorizing that would be like memorizing PI to the 20th digit.
<section>The section tag is like a dedicated-purpose div tag. The section defines an area of the page that is a functional unit of grouped content. This is a fairly broad description, but a chapter or a series of blog posts could technically be in a section tag. I interpret this as a container for related pieces of content, or articles.
<article>The article tag defines a piece of content that could be on its own on a page. It is content on a specific topic, for example the blog post that you are now reading could be in an article tag. The idea is that if an article was syndicated on its own in a web feed, the content it contains should be complete and should make sense.
<header>The header tag basically replaces what was normally done with <div id=”header”>. It represents the top section of a page, that usually contains branding and web site titles.
<footer>Similarly, the footer tag basically replaces what would be done with <div id=”footer”>. It represents the bottom section of a page, that usually contains copyright info, site maps and links to website legal documentation.
<nav>Also, the nav tag basically replaces <div id=”navigation”>. This would be a container for a navigation bar, normally done with a hyperlinked unordered list.
<aside>An aside is a piece of content that could stand on its own, but is related to the main content that it is within close proximity of. This is a tag that could be used to create sidebars that support the main content and possibly a context-based navigation bar. Essentially anything that could be defined as adding supporting information to the main content.
<time>This is a fairly random-seeming tag, however dates and times are often found on websites, yet there is no standard way to denote them. A blog post publication date/time could, for example, be placed within a time tag. This will make styling dates and times easier as well as make them stand out for software agents browsing website data.
Tags That Finally Died!
<center>,<font>,<frame>,<frameset>There were some tags from early versions of HTML that were still being used by folks who just didn’t want to adapt and learn semantic HTML. These included center, font, frame and frameset. HTML 5 ends the reign of terror that these elements caused, as they have been removed from the HTML spec as obsolete tags. Good riddance! Finally creating frames is actually invalid HTML. Now if only the b and i tags would go…
Old Browser Support </shudder>
In order for older browsers to understand new HTML elements, some JavaScript magic tricks need to be performed. For example, IE6 will allow you to use arbitrary HTML elements, if you first create them in the DOM with the document.createElement method. Luckily some code-wrangling heroes from MIT have already done the hard work for us and created a JavaScript file that can simply be included in the page head. Here is a link to their work: HTML 5 Enabling Script
Cool HTML 5 site:
http://www.nikebetterworld.com/