HTML 5: Now With More Method to the Madness

BY

Up to now, many people have regarded HTML coding as simply a matter of making the content fit together and look pretty on your browser the way you want, via CSS formatting of various <div> regions.  Not true anymore with HTML5, which not only introduces new content element tags but also a new algorithm that renders the contents of a web document in outline form.

The <div> tag does not have any semantic meaning and is simply a generic container to be styled and formatted as the coder wished, and that still remains the case.  However, new HTML5 tags such as <header>, <footer>, <article>, <aside>, <nav> and <section> have specific meanings relating to their content.

At first glance, the <section> tag appears to be the most generic of all the new content elements introduced in HTML5.  However, it is not simply a substitute for <div>, as many developers make the mistake of assuming.  In fact, it is one of the most significant elements in determining the outline structure of your document.

Here’s a basic example of how the <section> tag works in the context of outlining content:

<body>
    <h1>This is the main body</h1>
    <section>
<h1>This is top-level section #1</h1>
<section>
<h1>This is a second-level section</h1>
</section>
</section>
<section>
<h1>This is top-level section #2</h1>
</section>
</body>

This content will result in the following outline:

This is the main body

  1. This is top-level section #1
    1. This is a second-level section
  2. This is top-level section #2

Likewise, just as <section> is not a newfangled, hip, with-it HTML5 update of <div>, the <nav> tag is not just to be used for any region with lots of links.  It is a navigation region, and it’s to be used only for links that are relevant to moving around the site.  One notable example of a group of links that need not go in a <nav> section is what you might find in the footer.  In that case, the <footer> tag is more than enough.

So don’t be tempted to use lots of new HTML5 tags just because you can.  And when in doubt, you can still use <div>: it’s not going away just yet.

Leave a Reply

Your email address will not be published. Required fields are marked

Your comment

Your name, please

Your email, please

POSTED

January 18, 2012

SHARE POST

LOCATED IN

(62)

CATEGORIES

HAVE A QUESTION ABOUT OUR SERVICES?

Ready to start on a project?

WANT TO SEE OUR WORK?

Visit our case studies page or request specific project examples.