Rethinking Structural Design with New Elements in HTML 5

Updated July 9, 2018 • 24 comments

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

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.

24 responses to “Rethinking Structural Design with New Elements in HTML 5”

Rick Beckman 2007/08/21 2:27 pm

I thought I had read somewhere that the H# tags were being replaced with a newer tag, heading or 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 section tag 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. :)

Perishable 2007/08/21 3:11 pm • Post Author

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 heading tag 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.. ;)

Rick Beckman 2007/08/21 3:48 pm

Hmm, looking at that link you shared, I’m thinking I misunderstood what I read a while back. It seems that the header tag 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 numbered h tag be used within it.

Still, it would be nice to have “unmetered” h tags so that, on the rare occasion it would be necessary, there would be no six-level limit on depth-of-document.

Cyan-Light 2007/10/18 2:12 pm

I think that the XHTML 2.0 working group are replacing the h# tags with a single h. Not exactly nice, seeing as one would have to re-nest every section to get back up to speed if one suddenly has to end.

Perishable 2007/10/21 8:59 am • Post Author

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 as divs, 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 of h# 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 any h tags 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.

Ryan Kelly 2009/03/27 1:13 pm

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.

Jeff Starr 2009/03/29 8:17 am • Post Author

@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”?

Ryan Kelly 2009/03/29 10:31 am

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.

Jeff Starr 2009/03/29 11:53 am • Post Author

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.

Ryan Kelly 2009/03/30 12:13 pm

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?

Jonathan Ellse 2009/04/03 9:06 am

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!

Jeff Starr 2009/04/06 1:27 pm • Post Author

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

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

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?

Comments are closed for this post. Something to add? Let me know.

Rick Beckman 2007/08/21 2:27 pm

I thought I had read somewhere that the H# tags were being replaced with a newer tag, heading or 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 section tag 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. :)
Perishable 2007/08/21 3:11 pm • Post Author

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 heading tag 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.. ;)
Rick Beckman 2007/08/21 3:48 pm

Hmm, looking at that link you shared, I’m thinking I misunderstood what I read a while back. It seems that the header tag 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 numbered h tag be used within it.

Still, it would be nice to have “unmetered” h tags so that, on the rare occasion it would be necessary, there would be no six-level limit on depth-of-document.
Cyan-Light 2007/10/18 2:12 pm

I think that the XHTML 2.0 working group are replacing the h# tags with a single h. Not exactly nice, seeing as one would have to re-nest every section to get back up to speed if one suddenly has to end.
Perishable 2007/10/21 8:59 am • Post Author

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 as divs, 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 of h# 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 any h tags 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.
Ryan Kelly 2009/03/27 1:13 pm

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.
Jeff Starr 2009/03/29 8:17 am • Post Author

@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”?
Ryan Kelly 2009/03/29 10:31 am

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.
Jeff Starr 2009/03/29 11:53 am • Post Author

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.
Ryan Kelly 2009/03/30 12:13 pm

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?
Jonathan Ellse 2009/04/03 9:06 am

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!
Jeff Starr 2009/04/06 1:27 pm • Post Author

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

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

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?

12 • Newer Comments »