Rethinking Structural Design with New Elements in HTML 5
[ Keywords: html, design, markup, structure, elements, header, footer, article, section, header, nav ]
![[ Image: Tyrannosaurus Skull ]](http://perishablepress.com/press/wp-content/images/2007/misc-chunks/html-dinosaur.jpg)
HTML 5, also known as Web Applications 1.0, provides new markup elements that will change the way you design your web pages. The new elements replace commonly used divisions in web documents, facilitating an even greater degree of separation between structure (HTML) and presentation (CSS). Indeed, in many documents, the new elements will structure the document while providing enough hooks to render obsolete previously required divisions, classes, and identifiers. Let’s take a look..
New Structural and Semantic Elements in HTML 5
Structural Elements
The new structural elements in HTML 5 consist of the following:
headersectionarticlenavfooter
These structural elements are relatively self-explanatory, but let’s look at each one briefly:
<header> — not to be confused with the head element, header is used to demarcate items displayed in the header of the page. For example, rather than wrapping your site banner and logo with <div id="header"></div>, you would simply use <header></header> instead.
<section> — as suspected, section demarcates a particular section of the page. This makes it possible to group a series of related items in a semantically meaningful way. For example, a series of articles on a page may be wrapped with <section></section> rather than the clumsier <div id="articles"></div>
<article> — another no-brainer, the article element is used to specify the items on a page that are associated with a particular article. Each article on the page is simply wrapped in a nice <article></article> element, thereby eliminating yet another meaningless division.
<nav> — the possibilities for the new nav element are endless. Anywhere you need to display a set of navigational links — the sidebar, the header, the footer, whatever — throw down a tough <nav></nav> tag and be done with it. No divs required!
<footer> — finally, an element to legitimize the footer! Using the new footer element, it is easy to clearly specify the region of the page containing the footer elements.
Semantic Elements
In addition to the new structural elements in HTML 5, there are also some choice new block-level semantic elements:
asidefiguredialog
These long-overdue elements serve to improve the semantical quality of several commonly employed page regions:
<aside> — with the aside element, designers finally have a semantically accurate way to markup peripheral components such as sidebars, pullquotes, and footnotes.
<figure> — the figure element is used to associate explicitly block-level elements such as images (img) and other objects (object, embed, and iframe) with their respectively descriptive captions.
<dialog> — the dialog element specifies an area of the page in which a conversation or other form of interpersonal communication has taken place. Of course, the perfect candidate for this element is the comments section in blogs and forum sites. Whoever thought of this one deserves a raise! ;)
Rethinking Structural Design
The new HTML 5 elements discussed in this article have the potential to greatly advance the practice of writing semantically meaningful markup. Before HTML 5, a designer striving toward web standards and trying to keep markup seperate from style might resort to something similar to this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Old-School Markup Example</title>
</head>
<body>
<div id="header">
<h1>How to be a Dinosaur</h1>
<h2>Tips and Tricks from T-Rex..</h2>
</div>
<div id="navigation">
<ul>
<li><a href="http://domain.tld/triceratops/">Triceratops</a></li>
<li><a href="http://domain.tld/velociraptor/">Velociraptor</a></li>
<li><a href="http://domain.tld/tyrannosaurus/">Tyrannosaurus</a></li>
</ul>
</div>
<div id="content">
<div class="article">
<h3>Top Seven Meteor-Shower Survival Tips</h3>
<p>So, you want to survive impending doom..</p>
</div>
<div class="article">
<h3>Last Meals: What to Eat before You Die</h3>
<p>Don't check out with an empty stomach..</p>
</div>
<div class="article">
<h3>Three Clues that Your Species is Extinct</h3>
<p>Do you ever feel like you are all alone..</p>
</div>
</div>
<div id="comments">
<h4>Recent Comments</h4>
<dl>
<dt id="comment-01">Comment from Caveman</dt>
<dd>Great post! I completely agree..</dd>
<dt id="comment-02">Comment from Neanderthal</dt>
<dd>How does it look so good..</dd>
<dt id="comment-03">Comment from Homo habilis</dt>
<dd>Thanks for the nice tips..</dd>
</dl>
</div>
<div id="sidebar">
<h5>Categories</h5>
<ul>
<li><a href="http://domain.tld/roar.html">Roar like a beast</a></li>
<li><a href="http://domain.tld/scary.html">Act really scary</a></li>
<li><a href="http://domain.tld/friends.html">Eat your friends</a></li>
</ul>
<h5>Archives</h5>
<ul>
<li><a href="http://domain.tld/triassic.php">Triassic Period</a></li>
<li><a href="http://domain.tld/jurassic.php">Jurassic Period</a></li>
<li><a href="http://domain.tld/cretaceous.php">Cretaceous Period</a></li>
</ul>
<h5>Blogroll</h5>
<ul>
<li><a href="http://fossilr.com/">Fossilr</a></li>
<li><a href="http://dinopedia.com/">Dinopedia</a></li>
<li><a href="http://growlpress.com/">GrowlPress</a></li>
</ul>
</div>
<div id="footer">
<h6>All Content Copyright 100 Million Years BC</h6>
</div>
</body>
</html>Ugh! It’s a div nightmare! Sure, not all of the divs are necessary, but anyone who has ever tried to style a killer-looking blog page will admit that there are not many alternatives. Thank the maker for the new elements in HTML 5. Now, with our new, semantically relevant tags, let’s rewrite the previous page using code that actually makes me drool:
<!DOCTYPE html>
<html>
<head>
<title>New-School Markup Example</title>
</head>
<body>
<header>
<h1>How to be a Dinosaur</h1>
<p>Tips and Tricks from T-Rex..</p>
</header>
<nav>
<ul>
<li><a href="http://domain.tld/triceratops/">Triceratops</a></li>
<li><a href="http://domain.tld/velociraptor/">Velociraptor</a></li>
<li><a href="http://domain.tld/tyrannosaurus/">Tyrannosaurus</a></li>
</ul>
</nav>
<section>
<h2>Prehistoric Posts</h2>
<article>
<h3>Top Seven Meteor-Shower Survival Tips</h3>
<p>So, you want to survive impending doom..</p>
</article>
<article>
<h3>Last Meals: What to Eat before You Die</h3>
<p>Don't check out with an empty stomach..</p>
</article>
<article>
<h3>Three Clues that Your Species is Extinct</h3>
<p>Do you ever feel like you are all alone..</p>
</article>
</section>
<dialog>
<h4>Recent Comments</h4>
<dl>
<dt id="comment-01">Comment from Caveman</dt>
<dd>Great post! I completely agree..</dd>
<dt id="comment-02">Comment from Neanderthal</dt>
<dd>How does it look so good..</dd>
<dt id="comment-03">Comment from Homo habilis</dt>
<dd>Thanks for the nice tips..</dd>
</dl>
</dialog>
<aside>
<h5>Categories</h5>
<ul>
<li><a href="http://domain.tld/roar.html">Roar like a beast</a></li>
<li><a href="http://domain.tld/scary.html">Act really scary</a></li>
<li><a href="http://domain.tld/friends.html">Eat your friends</a></li>
</ul>
<h5>Archives</h5>
<ul>
<li><a href="http://domain.tld/triassic.php">Triassic Period</a></li>
<li><a href="http://domain.tld/jurassic.php">Jurassic Period</a></li>
<li><a href="http://domain.tld/cretaceous.php">Cretaceous Period</a></li>
</ul>
<h5>Blogroll</h5>
<ul>
<li><a href="http://fossilr.com/">Fossilr</a></li>
<li><a href="http://dinopedia.com/">Dinopedia</a></li>
<li><a href="http://growlpress.com/">GrowlPress</a></li>
</ul>
</aside>
<footer>
<h6>All Content Copyright 100 Million Years BC</h6>
</footer>
</body>
</html>How many divs in the new markup? None. And there are plenty of juicy hooks on which to hang CSS styles and DOM methods. Without using a single div, id, or class, it is possible to style this page exactly as if it were marked up using the old-school, div-sandwich technique.
I am very excited about these new elements. For anyone who has ever struggled to produce clean, semantically meaningful HTML markup, the great potential of these new structural elements is immensely inspiring.
Related articles
- Exploring the (X)HTML Link Element
- Auto-Focus Form Elements with JavaScript
- Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom
- HTML Frames Notes Plus
- CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu
- Minimalist Web Design Showcase: Equivocality
- Auto Clear and Restore Form Elements
About this article
This is article #391, posted by Jeff Starr on Tuesday, August 21, 2007 @ 11:00am. Categorized as Structure, and tagged with code, design, html, markup, Standards. Updated on November 05, 2007. Visited 13006 times. 5 Responses »
Bookmark • Trackback • Comment • Subscribe • Explore
« A Delightful Romp through the 2007 PDX Zine Symposium • Up • Bare-Bones HTML/XHTML Document Templates »
1 • August 21, 2007 at 2:27 pm — Rick Beckman says:
I thought I had read somewhere that the
H#tags were being replaced with a newer tag,headingor similar.Rather than using a number in the tag to denote which level of header was being used, it was based upon which level of the new
sectiontag it appeared in.Although, things may have changed. This was a few months ago I remember seeing it. :)
Either way, it’s great to see HTML progressing. I wonder if anyone’s already toying with updated versions of popular WordPress themes to be ready for when browsers start supporting this new version. :)