Feature
Post
Category
Code
Published Monday September 7, 2009 at 12:29 am
By Dustin Boston with 1 comment
Getting Started With HTML5: Part 2
Last week we took care of the head of our HTML5 document. If you haven’t checked it out, run over there real quick. It will only take you 5 minutes to get up to speed with a working proof of concept. Here’s the code again in case you forgot:
<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Demo</title>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<style>
header,nav,section,article,aside,footer {display:block;border:1px solid #bbb;padding:1em;}
header,nav,section,article,aside,footer {border:1px solid #bbb;padding:1em;}
header{background-color:#EFFBFF;}
h1,h2,nav li {font-family:helvetica,arial,sans-serif;}
nav{margin:1.5em 0;}
nav li {display: inline;list-style-type: none;padding-right:1em;}
article,aside{float:left;margin-bottom:1.5em;}
article {width:60%;}
aside {width:28%;margin-left:1em;}
footer {clear:both;}
.identifier {background-color:#FFF79F;font-style:italic;}
</style>
</head>
<body>
<header>
<p class="identifier">header</p>
<h1>HTML 5 Demo</h1>
</header>
<nav>
<p class="identifier">nav</p>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<article>
<p class="identifier">article</p>
<h2>Terminology and Usage</h2>
<section>
<p class="identifier">section</p>
<ul>
<li>The header element represents a group of introductory or navigational aids.</li>
<li>The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.</li>
<li>An article element is "independent" in the sense that its contents could stand alone, for example in syndication.</li>
<li>The section element represents a generic document or application section...[it] is not a generic container element.</li>
<li>The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.</li>
<li>The footer element represents a footer for its nearest ancestor sectioning content. </li>
</ul>
</section>
</article>
<aside>
<p class="identifier">aside</p>
<h2>Attribution</h2>
<section>
<p class="identifier">section</p>
<p>The main article on this page is comprised of excerpts from the HTML 5 draft.</p>
</section>
</aside>
<footer>
<p class="identifier">footer</p>
<p>By Dustin Boston</p>
</footer>
</body>
</html>
header
One of the first items developers put on the page is a header. Now we have a tag to represent that part of the page. This is the obvious place to put the title of your website, the navigation, and other header-type elements. You can also put a header in other parts of the page. It doesn’t have to go at the top but usually it will. The most common place will be in an article or section tag.
nav
The nav element is just like the header element, except it contains navigational elements, i.e. links to other pages or parts of a page.
article
This is from the HTML5 Draft Spec: An article element is “independent” in the sense that its contents could stand alone, for example in syndication. I think the best way to explain this is with a little example of content that would be good for an article:
- Blog post
- News article
- Tutorials
- Main page content
And here is an example of content that would NOT be good for an article:
- Navigational elements
- Main header content
- Sidebars
- Footer content
Get the difference? One is actual content that can be swiped as-is and does not require any context. The other elements do not necessarily add or detract from the article, but would require context to be understood in a different context.
Part 2 conclusion
One of the great things about HTML5 is that the new elements are simple, few, and needed. The header, nav, and article tags are perfect examples. Next week we’ll hit up a few other elements including the aside and footer tags.
