HTML 5: Now With More Method to the Madness
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
- This is top-level section #1
- This is a second-level section
- 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.
