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 *