Latest TweetsDifference between mod_alias and mod_rewrite perishablepress.com/difference…
Perishable Press

Rethinking Structural Design with New Elements in HTML 5

[ Image: Tyrannosaurus Skull ] 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:

  • header
  • section
  • article
  • nav
  • footer

These elements are relatively self-explanatory. Here is a summary:

<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:

  • aside
  • figure
  • dialog

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.

Jeff Starr
About the Author Jeff Starr = Web Developer. Book Author. Secretly Important.
Archives
24 responses
  1. Jeff Starr

    @Jonathan Ellse: My pleasure, Sir! Thanks for dropping by! :)

  2. Wikus du Plessis July 21, 2009 @ 9:48 am

    Great Article! Looking forward to playing around with this a bit.

  3. 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.

  4. Thank you! This is great.

  5. 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!

  6. 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

  7. 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..

  8. Jeff Starr

    Hi revive, thanks for the excellent information — it definitely helps, and certainly contributes to the information presented in the article. Nice one! ;)

  9. 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!

  10. Shashank Lakhotia September 5, 2010 @ 9:37 pm

    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.

  11. Jeff Starr

    True, img elements are inline and not block-level. Thanks for the reminder, much appreciated :)

  12. Birdie Dad June 19, 2011 @ 9:28 pm

    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

[ Comments are closed for this post ]