Be the first to write a review
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.
Nav
The nav tag is used for the navigation of the page, navigation of a section or a group of pages. Like the other tags, the user is not limited to one "Nav" section on a page. In fact, it is fairly common to see main navigation across the top of a page, secondary navigation perhaps on the left side of a page and text navigation just before the page's footer. All these instances can use the "nav" tag to describe the navigational elements contained within them. By definition, use the "nav" element wherever you have links to other pages within the site or to other parts of the page.
Footer
Footer is pretty much the opposite of "header". The "footer" tag can be used for the content at a bottom of a page, but you might also have a footer at the bottom of an article or even a section. I have also seen footer instances in an aside section. Like the header tag, the footer is not limited to one on the page and it has nothing to do with styling.
There are, however, some guidelines of what might be appropriate content for a footer. If the footer is at the bottom of the page, one would probably put a copyright notice and/or author information in it. You are allowed to put both sections and nav elements in the footer, as one might do when creating a text navigation near the bottom of the page for accessibility reasons. Contact information might be another item to go into a footer, but the HTML5 spec people say you must include the address element around the contact information within the footer if you do so. Address is one of the elements we'll be discussing in the next segment(s).
Putting It All Together
I typically learn best by example, so I have put together a somewhat simple example of an HTML 5 document so you can get an idea of how the structural elements of HTML5 work together. You can copy the code posted below and paste it into a browser to study its structure.
The unstyled document looks like this:
Here is the html code for the same page:
<!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>
<header>
<h1>My Home Page</h1>
</header>
<nav>
<ul>
<li>About Me</li>
<li>My Blog</li>
<li>Contact Me</li>
</ul>
</nav>
<section>
<article>
<header>
<h2>My First Article: Football!</h2>
</header>
<p>I have a lot of interests but one of my
biggest and most surprising is that I LOVE FOOTBALL! For those of you outside
the United States, I'm not talking about soccer. I'm talking about good old
American NFL, College and whatever Football! There is nothing like spending a
Saturday glued to the television while you keep track of 18 college knock-down,
dragouts on 6 channels.Then you follow that up on Sunday with the amazing,
one-of-a-kind NFL (National Football League). Go, Brett Favre! </p>
</article>
<article>
<header>
<h2>My Second Article: Cooking with
Flair</h2>
</header>
<p>I have been a mom for a pretty long
time and every day for the last 20 some years of my life, I have prepared, in
varying degrees of tirelessness, thousands of meals of all kinds and all
nationalities for the brood that are my children. However, recently, thanks in
no small part to my daughter Amy, I have taken a new interest in cooking via
the Food Network. Whenever possible, Amy and I spend our lunch hours grabbing a
bite while we watch some great Italian feast being prepared and, more often
than not, we have to try this new wonder out ourselves within the next couple
of days. We love it!</p>
</article>
</section>
<footer>
© 2010 Nancy
</footer>
</body>
</html>
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.