Back to Top
The nuts and bolts for
Creative web development

HTML5: It’s A Whole New Ballgame

“An overview of the HTML5 structure and continue with a look at new tags and uses for the tags”

In this article, Nancy is going to introduce you to HTML5.  This article is the first in a series that will start with an overview of the HTML5 structure and continue with a look at new tags and uses for the tags.  We will also cover what browsers are supported, which are not and how to get the support-nots to play nicely.

Background

A few months ago, HTML5 was something to me that was going to happen in about a decade, because browser support wasn't there and wasn't going to be there in anything that served more than ten percent of the browsing community.  I have been doing this sort of work since 1996 and if there is one thing I have learned, it's that progress on getting anything new is slow because there are so many parties that have to agree; so many browsers that have to adopt; and then there is the matter of getting designers to use it and use it right.  Development progress generally takes years!  So why should I worry about HTML5?

Then there was a barrage of "Steve Jobs Hates Adobe" and "Flash is Going to Die" blog posts and articles and suddenly the climate had turned to HTML5 versus Flash.  My first thought was, "but this isn't even going to be an issue for YEARS!  Fast forward about six weeks and I am writing my first article on HTML 5 after living and breathing the stuff on a daily basis for the last few weeks and studying it intently for several before that.

NOTE:  A word about HTML5 versus Flash.  That is a misconception produced in the media that is just as exaggerated as the "Apple versus Adobe" claims.  HTML5, in my opinion, is not going to replace Flash, but I can surely see uses for both technologies.  Unless browser support for the Flash player is virtually abandoned, having universal browser support for both HTML5 and the Flash Player is going to give the developer a multitude of options, making all of us the real winners here. 
 
Recently, Adobe released the HTML5 pack for Dreamweaver (read http://www.dmxzone.com/go?17604) to help the newly released Dreamweaver CS5 to take better into account some of the amazing attributes of HTML5.  It was virtually Adobe's statement of "we HEAR you and we like HTML5, really we do!"  This is a very good thing.  HTML5 is now heavily supported in Dreamweaver CS5, right down to the code hinting.

I found myself thinking that I needed to get my rear in gear and find out about HTML5 and I was pleased to find a simple structure that makes sense.  I can remember when web work was mostly straight pages of text with images here and there.  After awhile, someone discovered you could put anything inside a table cell even though they were supposed to be only for data and finally you could layout a page (in a table) and get it to look like something.  This went along smoothly for awhile, then The Powers That Be (all hail the W3C) said, no, no, you can't lay out pages that way, you have to have divs all over the place and use CSS to shove them around to get what you want. 

Of course, there are divs and there are divs.  This is not the Netscape 4 AP Div that you could just lay on top of other junk, although I am continually shocked as to how many web designer-wanna-be's think that.  I actually inherited a website a few months ago where the guy before me did the whole site with layers upon layers upon layers.  You couldn't edit anything and I had to remake the entire site.  But this is not those DIVs.  This is the other div where we put them around everything, sometimes twice or three times to accommodate the CSS that will tell them where they sit and how they can look.  We give them identification names (id) and we name them something meaningful and then we tell them how to look and how to act using CSS.  Then we tear out our hair because this div won't float that way or the margin is doubling in this browser while being non-existent in another browser.

What is HTML5?

The entrance of HTML5 almost looks like a return to a simpler life.  We have tags that make sense.  A header is not THE header, but the heading of a section, of an article or whatever.  The same holds true for other elements like the footer, section, article and so on.  We can have more than one header, for example, in a page and they truly act as a header over the content they govern.  We have a nav tag for .. you guessed it .. navigation.  We have aside for secondary content of the page and we have tags called article and section that can subdivide the content into something that defines where it goes.  Simpler.

This is probably easier to see with an example, however, so let's take a look at the structure by constructing a simple HTML5 document.  Our discussion should begin at the very beginning, the doctype.  If you look at the list of doctypes supported by Dreamweaver CS5, it's enough to make your head spin.  Starting with HTML 4.01, we have transitional or strict.  Then we move to XHTML 1.0 where again we have transitional or strict.  Moving along, we can proceed to XHTML 1.1 or if you want to design for Mobile, there's a doctype for that as well.  Each one gets a little more complicated and a little longer than the earlier ones. 

Then we move to HTML5.  Have you seen the doctype for HTML5?  It's this:

<!DOCTYPE HTML>  

No kidding.  That's it.  Simpler. 

The entire document from that point on is also simpler, or it should be.  The following basic HTML5 document is all you need to have and it can grow from there.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My HTML5 Document</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<p>This is the first HTML5 document.</p>
</body>
</html>

This simple document tells you a lot about HTML5 just in its few lines.  In the head of the document, you will notice that we have a link to a script on Google Code.  That script will get some of the HTML5 elements to be recognized in IE8 and below, which is everything available at the present time.  IE9 promises to be HTML5 compliant so we'll watch that with interest.  The style declaration which comes next displays the new HTML5 elements as blocks so they have some substance to them in current browsers that don't support the new tags.  It's important to put this chunk of CSS in every HTML5 document that you create at the present time.  As browser support continues to grow, there will come a time when this style chunk is no longer necessary.

The rest of the document is the body but it's not quite the same body we have been used to seeing.  Unless you're still designing in tables, you're used to using a lot of divs with id's like header, content, footer, wrapper and sidebar but those id's are for identification in the application of the pertinent CSS.  The structural tags of HTML5 have nothing to do with CSS.  The HTML5 tags I would define as "structural" would be header, section, aside, article, nav and footer.  In part one of this article, I would like to discuss just these structural tags in detail.             

Nancy Gill

In early 1996, Nancy Gill picked up her first book on HTML and permanently said goodbye to the legal field. She has been busy ever since developing web sites for businesses, organizations and social groups in Central California and occasionally beyond. Nancy has served as a member of Team Macromedia since late 2001, first with UltraDev and then moving to Dreamweaver when the programs were consolidated in 2002. She also serves as Assistant Manager for the Central California Macromedia User's Group.
Nancy is the co-author of Dreamweaver MX: Instant Trouble-Shooter and technical editor for several Dreamweaver and Contribute related books, including the well-known Dreamweaver MX 2004: A Complete Reference. She also penned the first ever Contribute article for Macromedia's Own Devnet "Getting Up to Speed with Contribute in 10 Minutes".

Nancy has three children, two in college and one in high school. Offline, she enjoys various sporting activities, is a wild NFL football fan and sings in the church choir.

See All Postings From Nancy Gill >>

Share this Article