Rethinking Structural Design with New Elements in HTML 5
![[ Image: Tyrannosaurus Skull ]](https://perishablepress.com/wp/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
Some of the most useful new structural elements in HTML 5:
headersectionarticlenavfooter
These elements are relatively self-explanatory. Here is a summary:
<header>- Not to be confused with the
headelement,headeris 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,
sectiondemarcates 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
articleelement 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
navelement 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. Nodivs required! <footer>- Finally, an element to legitimize the footer! Using the new
footerelement, 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
asideelement, designers finally have a semantically accurate way to markup peripheral components such as sidebars, pullquotes, and footnotes. <figure>- The
figureelement is used to associate explicitly block-level elements such as images (img) and other objects (object,embed, andiframe) with their respectively descriptive captions. <dialog>- The
dialogelement 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.
24 responses to “Rethinking Structural Design with New Elements in HTML 5”
@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