Posted on Jan 12, 2009
Structural Tags in HTML5
The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let's dig in.
Defining Structure
<section>
A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.
<header>
The header of a section, typically a headline or grouping of headlines, but may also contain supplemental information about the section.
<footer>
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
<nav>
Defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer.
<article>
An independent entry in a blog, magazine, compendium, and so on.
<aside>
An aside indicates content that is tangentially related to the content around it.
Putting it Together
So let's take a look at how we would put together a typical blog page with our new structural tags.
<!DOCTYPE html>
<html>
<head>
<title>Standard Blog</title>
</head>
<body>
<header>
<h1><a href="#">Standard Blog</a></h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1><a href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1><a href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
<article>
<header>
<h1><a href="#">Title</a></h1>
</header>
<section>
<p>Lorem ipsum...</p>
</section>
</article>
</section>
<footer>
<p>Copyright
Loading comments...