Rethinking Structural Design with New Elements in HTML 5
Posted on August 21, 2007 in Structure by Jeff Starr
![[ 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
- The Power of HTML 5 and CSS 3
- Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom
- Exploring the (X)HTML Link Element
- Auto-Focus Form Elements with JavaScript
- HTML Frames Notes Plus
- CSS/(X)HTML Tutorial: Hovering Accessibility Jump Menu
- Auto Clear and Restore Form Elements
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. :)
Apparently the working group is sticking with the traditional set of
H#elements. At least for now.Nonetheless, it would be interesting to see a generalized
headingtag that is classified according to its relative location in the document. It seems such a contextual approach to headings would provide greater flexibility than does the current selection of explicitly defined tags. But again, the specs are still in “draft” mode, and as such are subject to change.Regardless, as you say, it is great to watch HTML evolve and keep up with modern practices. As far as I can tell, HTML 5 will serve the needs of designers far better than previous versions.
Given the buzz, I would not be surprised at all if there were a few markup-savvy designers already implementing HTML 5 in some new, cutting-edge WordPress themes.. ;)
Hmm, looking at that link you shared, I’m thinking I misunderstood what I read a while back. It seems that the
headertag is what I was thinking of — it can be used repeatedly throughout the page to denote headers of various sections, and it requires that a numberedhtag be used within it.Still, it would be nice to have “unmetered”
htags so that, on the rare occasion it would be necessary, there would be no six-level limit on depth-of-document.I think that the XHTML 2.0 working group are replacing the
h#tags with a singleh. Not exactly nice, seeing as one would have to re-nest everysectionto get back up to speed if one suddenly has to end.Hmm, I think this may have been what Rick was referring to in the first comment. With the current
h#elements, there is an inherent degree of semantic information that may be used independently of the overall structure (as defined by other elements such asdivs, etc. It’s almost like the current implementation (XHTML 1.x) is backward: container elements are defined semantically (according to XHTML) based on the type ofh#element they contain. Thus the proposed solution for XHTML 2.0 makes sense, container elements are inherently defined and given semantic meaning based on their identity, which then defines anyhtags enclosed within. Yes, it may be a royal pain when it comes to updating documents, but the new markup seems like a solid step forward for sites employing XHTML from the beginning.This is a horrible misuse of the H# tags. Sorry to say…
your sidebar and footer are, apparently, parts of that third article. Since that should not be the case, I recommend using the H# tags correctly.
@Ryan Kelly: “Horrible” may be a bit dramatic, wouldn’t you say? Perhaps you would be so gracious as to enlighten us regarding how to use the
H#tags “correctly”?h1 - How to be a Dinosaur
-h2 - Tips and Tricks from T-Rex…
–h3 - Top Seven Meteor-Shower Survival Tips
–h3 - Last Meals: what to eat before you die
–h3 - three clues that your specie is extinct
asides should not be headers as they don’t have to do with the actual content on the page, unless you consider them a part of the h1, in which case you would put them a h2s. h5s are sections under h4s, which aren’t even here.
The copyright should not be a header because it is not a section, it is a notice. h6s should not be used unless they are after an h5. In that case, it would have to be content that is a subsection of the h5.
So you agree with the h1- h3 elements, but take issue with the h4, h5, and h6 elements. I disagree that asides need to be h2 headers if they are considered to be related to the h1 element. In general, I consider the document holistically, with each section contributing to the overall theme of the page, according to its purpose. Each element represents the semantic importance of its associated content in relation to the entire document. Thus, h4 (comments) and h5 (archives, blogroll, categories) elements are used to distinguish content that is gradually yet certainly less relevant than that demarcated by h3 (post title), h2 (subtitle), or h1 (main title) elements. Thus, aside content contributes to the overall purpose of the page, but is not as relevant to its overall purpose as is the subtitle (h2 element) as you suggest.
Further, to suggest that h5 elements must be “under” h4 elements is unrealistic at best. We are speaking to the general case here, and most documents are far too dissimilar to adhere to such a rule.
And finally, the copyright section may indeed be considered as a “section”, especially if it contains additional information, such as site policy, designer credits, and so on.
I look at headings completely different, like an outline of the page. If we created an outline of the current page, you’d get
How to be a dinosaur
–Pre-Historic Posts
—-Meteor Shower survival tips
—-Blah blah blah
—-Etc. Etc.
——Recent Comments
——–Aside stuff
——–More aside stuff
———-Copyright xxxx xxxxxxxxxx
The reason this wouldn’t help the reader at all, if they were to look at an outline of the page or a table of contents, is they see the aside content as a new section in the Recent Comments section, and the copyright is a notice for “more aside stuff”. Apparently, only recent comments are displayed on the page, and the rest of the pre-historic posts have nothing but text. See my point here?
Well, I’ve been looking for something like this since I knew HTML 5 was out, but now I found this.
Keep up the great work Jeff!
@Ryan Kelly: Yes, I see where you are coming from, however I don’t think that such reasoning — as brilliant as you may find it to be — qualifies you to barge in with such arrogance:
Obviously, there is no one “right” way of marking up a web document, especially where headings are concerned. Web documents are as diverse as their content. Diverse as their authors. And there is certainly more than one correct way to structure a document.
My thinking is that each designer/developer is responsible for creating clean, semantic documents according to their own needs. As you can see, I clearly have developed my own thinking regarding this topic, so perhaps a little less assumption is in order.
See my point here?
@Jonathan Ellse: My pleasure, Sir! Thanks for dropping by! :)
Great Article! Looking forward to playing around with this a bit.
I am building my personal blog directly with HTML5/CSS3 this article helped me get a good understanding of some of the new markup. Thanks keep up the great work.
Thank you! This is great.
Nice! Very good explanation buddy.
I hope you can elaborate more about “aside” (replacement for a sidebar?), “figure” and “dialog”. I still blur with those 3 function.
Thanks anyway dudes! Love it!
Hi Jeff,
Great article and HTML 5 example.. thanks for the good read.
As for the semantics of the H# tags and proper use, one can see from this:
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements
that even using tags within sections one after another, would result, semantically, in the same effect as using H1-6 tags .. sequentially.
To Ryan, although I too prefer ‘sequential’ listing oh H# tags, you can see from the first example on this page:
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#headings-and-sections
That the ‘location’ of the H# tag within the page does not change it’s hierarchy.. yes, it may not be as readable as it would be using H1 to H6 tags sequentially,.. but the thing to note is this: When correcting someone, please be sure to state your position as opinion and not fact, when it is such.
Or better yet, provide resources so you, I and the rest of the visitors can all learn and get better at producing HTML 5 Document CORRECTLY :) The last thing we want to do is ‘make it our way’ and miss the purpose of the this new opportunity.
Thanks again
Revive
an added note for those wondering what the purpose of using H1 tags within sections listed sequentially.. think of it in terms of a blog or page that has articles one after another.. each one with their current content and of course their own H1 … showing these within sections on a main page would then allow this page to be semantic by automatically creating a hierarchy of the H1 tags, based on their section location in relation to the others.. pretty slick..
Hi revive, thanks for the excellent information — it definitely helps, and certainly contributes to the information presented in the article. Nice one! ;)
Anytime, but it’s you that deserves the thanks ;) Can’t tell you how ’stoked’ our team is as we contemplate and test the possibilities in HTML 5 !!
Keep up the great work and take care!
Hi Author,
I went through your HTML 5 article above and found one thing to contradict on.
One of your statement says “..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.”
In the above statement you have used the word “block level” elements for “images” whereas images are not the block level elements as far as my html knowledge says. They are the inline elements of html.
So kindly let me know your thoughts on the same.
Except this thing I really enjoyed your informative article on html 5 & hope to check this regularly.
Thanks
Shashank Lakhotia
Sr. Web Developer
Cybage Softwares Pvt. Ltd.
True,
imgelements are inline and not block-level. Thanks for the reminder, much appreciated :)Awesome informational internet site!!! I need to say which I am totally adoring it. ;-) I’ve simply signed till your site RSS feed additionally and I’ll arrive back again once again. ;-) give thanks to