Depending on who you ask, HTML 5 is either the next important step toward creating a more semantic web, or a disaster that's going to trap the web in yet another set of incomplete tags and markup soup. The problem with both sides of the argument is that almost no one is using HTML 5 in the wild so its theoretical problems and solutions remain largely untested. That said, it isn't hard to see both benefits and potential problems with the next generation of web markup tools. First off, what do we mean by HTML 5? Well, ideally we mean the whole thing, new semantic structural tags, API specs like canvas or offline storage and even some new inline semantic tags. However, for practical reasons -- read: browser support issues -- we're going to limit this intro to just the structural tags. As cool as Canvas, offline storage, native video or the geolocation APIs are, most browsers don't yet support them. But wait, most browsers don't support the new structural elements either... That's true, but the vast majority of them will happily accept any tag you want to make up. Even IE 6 can deal with the new elements, though if you want to apply styles using CSS you'll need a little JavaScript help. The one thing to keep in mind when you're applying styles to the new tags is that unknown tags have no default style in most browsers. They're also treated as inline elements. However, because most of the new HTML 5 tags are structural, we'll want them be behave like block elements. The solution is make sure that you include display:block; in your CSS styles. To help make some sense of what's new in HTML 5 today we're going to dive right in and start using some of the new structural elements. ###Finally, a doctype anyone can remember The first thing we need to do to create an HTML 5 document is use the new doctype. Now if you've actually memorized the HTML 4 or XHTML 1.x doctypes you're better monkeys than us. Whenever we start a new page we have to bring up an old one and cut and paste the doctype definition over. It's a pain, which is why we love the new HTML 5 doctype. Are you ready? Here it is:
Shouldn't be too hard to commit that to memory. Simple and obvious. The idea is to stop versioning HTML so that backwards compatibility is easier. Whether or not that pans out in the long run is a whole other story, but at least it saves you some typing in the mean time. ###Semantic Structure at Last Okay, we have our page defined as an HTML 5 document. So far so good, now what are these new tags you speak of? Well, before we dive into the new tags consider the structure of your average web page, which (generally) looks something like this: 


    
    ...stuff...
    
    
        
        
        

            
My Article

            
...
That's fine and dandy for display purposes, but what if we want to know something about what the page elements contain? In this example we've added IDs to all our structural divs -- a fairly common practice among savvy designers. The purpose is two-fold, first, the IDs provide hooks which can be used to apply styles to specific sections of the page and, second, the IDs serve as a primitive, pseudo-semantic structure. Smart parsers will look at the ID attributes on a tag and try to guess what they mean, but it's hard when ID names are different on every site. And that's where the new structural tags come in. Recognizing that these IDs were common practice, the authors of HTML 5 have gone a step further and made some of these elements into their own tags. Here's a quick overview of the new structural tags available in HTML 5: ####<header> The header tag is intended as a container for introductory information about a section or an entire webpage. The <header> tag can include anything from your typical logo/slogan that sits atop most pages, to a headline and lede that introduces a section. If you've been using <div id="header"> in your pages, that would be the tag to replace with <header>. ####<nav> The nav element is pretty self-explanatory -- navigation goes here. Of course what constitutes navigation is somewhat debatable -- there's primary site navigation, but in some cases there may also be page navigation elements as well. The WHATWG, creators of HTML 5, recently amended the explanation of <nav> to show how it could be used twice on the same page. For more on nav and a lively debate about HTML 5, see Zeldman's article on the nav element. The short story is that if you've been using a <div id="nav"> tag to hold your page navigation, you can replace it with a simple <nav> tag. ####<section> Section is probably the most nebulous of the new tags. 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. In our example above the div "content" would be a good candidate to become a section. Then within that section, depending on the content, we might have additional sections. ####<article> According the 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." ####<aside> Another fairly nebulous tag, the aside element is for content that is "tangentially related to the content that forms the main textual flow of a document." That means a parenthetical remark, inline footnotes, pull quotes, annotations or the more typical sidebar content like you see to the right of this article. According to the WHATWG's notes it seems like <aside> would work in all those cases, despite the fact that there's considerable difference between a pull quote and tag cloud in your sidebar. Hey, no one said HTML 5 was perfect. ####<footer> Footer should also be self-explanatory, except perhaps that you can have more than one. In other words sections can have footers in addition to the main footer generally found at the bottom of most pages. ###Putting it all Together Okay, let's rewrite our original example using the new tags: ...stuff...

My Site

<nav>

My Article

...

Much cleaner and easier to understand. A couple of notes: we could have wrapped our

My Article

headline in header tags. I opted not to since the h1 element already conveys the heading, but if you also had a pub date, byline or other data atop your post, the collective group of tags would be a good candidate for adding a header container tag. Also note that we could add a second footer element below the article element to contain things like next/prev navigation, related posts or other content. ###Styling the new tags In most browsers all you need to do is simply define your styles as you normally would, but make sure to add the display:block; rule to every element (for now anyway, in time, as browsers begin adding the new elements that won't be necessary). For example let's apply some styles to our header: header { display: block; font-size: 36px; font-weight: bold; } Keep in mind that you can still added class and ID attributes to these tags so if you wanted to style one navigation section separately you'd simple add a class or ID to the tag like so: