HTML5: Using sectional elements
Takeaway: A look at various sectional elements in the new HTML5 specification and examples of how they are meant to be used.
Included within the new HTML5 specifications are a new base template, several revised elements, and in addition, the HTML5 specification provides new section and structural elements that you can start using today to streamline your markup coding practices.
Several elements overlap into both sectional and structural descriptions, including the article <article>, aside <aside>, and section <section> tags, and descriptions for proper usage of the headings group <hgroup> and <h1 - h6> headings.
Section elements have been added to the specification as a way of semantically representing content on the web. This is the specification’s cure for the rampant div-itis and class-itis that has plagued markup coding practices in recent years. Web authors are strongly encouraged to view the <div> element as an element of last resort. When no other element is suitable and all section element options have been exhausted then the <div> can be utilized. Use of the <div> element instead of more appropriate sectional elements leads to accessibility issues for readers and becomes a maintenance headache for authors. Semantic meaning may require adding an ID and this is recommended: i.e., <article id=”blog”>.
<article>
This element falls under the flow content and sectioning content categories of the specification. The <article> specification states that the article element can represent a self-contained composition in a document, page, application, or site that is independently reusable or available for distribution, e.g., in syndication. The article element would include the form of a blog post, a magazine or newspaper article, a comment, a widget or gadget, or any form of independent item of content. Nested article elements must be related in principal to the outer article element, for example, comments. An example below shows a blog post using the <article> element:<article>
<header>
<h1>Bon Vivant Adventures</h1>
</header>
<p>Want to order water with your dinner in Paris? Be like the French, and
be sure you use the proper inflection when you ask for <i>carafe d'eau</i>.</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>
<aside>
This element usage has been reassessed since its initial specification as holding secondary content related to the site as a whole, such as the commonly known “sidebar.” Now the acceptable use for an <aside> element is for secondary content when not nested within an article element.
The new definition of use for an <aside> element means that when nested within an <article> element, the content should be specifically related to the content within the article element. And when the <aside> element is used outside of an <article> element the contents should be related to the site as a whole, e.g., navigation, blogroll, and relevant content to the page. An example below shows the use of the <aside> element within a blog post and the page:
<body>
<header>
<h1>The Blog</h1>
</header>
<article>
<h2>The Next Blog Post</h2>
<p>This blog post is contained within the article element.</p>
<aside>
<h3>Footnotes</h3>
<ul>
<li><a href="#/fn1">Footnote#1</a> This aside pertains to the contents of this article</li>
</ul>
</aside>
</article>
<aside>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#/blog">Blog</a></li>
</ul>
</nav>
</aside>
</body>
<section>
This element represents an area within the web document page or application with a themed grouping of content. Several examples include chapters of a book, several tabbed pages within a tabbed dialog box, or numbered sections of a thesis. Other examples for the use of the <section> element would be within a web page document that is divided into sections for introductions, news items, blog posts, featured content, and contact information. The HTML5 specification on the <section> element does make note that web authors are encouraged to use the <article> element instead of the <section> element when it would be appropriate to syndicate the contents of the element. And as a general rule the <section> element is appropriate only if the contents would be listed explicitly within the document’s outline. Several examples of using the <section> element are presented below:
Example 1: In the following example, we see an article (part of a larger web document page) about tomatoes, containing several short sections:
<article>
<hgroup>
<h1>Tomatoes</h1>
<h2>Tasty, delicious, versatile produce!</h2>
</hgroup>
<p>The tomato is one of the most popularly grown home garden plants.</p>
<section>
<h1>Globe</h1>
<p>This larger variety of tomato can take up to 120 days to mature, and grow up to 5" in diameter.</p>
</section>
<section>
<h1>Cherry</h1>
<p>These tiny tomatoes are perfect for salads and snacking</p>
</section>
<section>
<h1>Plum</h1>
<p>Perfect for making sauces and salsas, the Roma variety also has great flavor.</p>
</section>
</article>
Example 2: This is a conference agenda separated into two sections, the opening plenary session and then the breakouts sessions:
<h1>Conference - Day 1</h1>
<Section>
<h1>Opening Plenary</h1>
<p>Welcome!</p>
<p>Keynote Speaker Introduction</p>
<p>Keynote Address</p>
<p>Presentation of Annual Achievement Award</p>
<p>State of the Department Address and Welcoming by Regional Director</p>
</Section>
<Section>
<h1>Breakout Sessions</h1>
<ul>
<li>Securing the Infrastructure</li>
<li>Web 2.0 Wiki and Blog's</li>
<li>Portal Community Workgroups</li>
<li>Internet Web Template 5.0</li>
<li>Managing ROT</li>
<li>Writing for the Web</li>
</ul>
</Section>
<hgroup>
This element represents the heading of a section within a web page document. The <hgroup> element is used to group any set of <h1 - h6> elements when the heading has multiple levels, such as is the case with subheadings, alternative titles, or taglines. <h1 - h6> sections may contain headings of any rank, but web authors are strongly encouraged to use elements of the appropriate rank for the section’s nesting level.
For the purposes of document summaries, outlines, and similar content, the text of <hgroup> elements is defined to be the text of the highest ranked <h1 - h6> element descendant of the <hgroup> element, if there are any such elements, and the first such element if there are multiple elements with that rank. If there are no such elements, then the text of the hgroup element is the empty string.
Here are some examples of valid headings using conforming code. In each case, the emphasized heading text represents the text that would be used as the heading in an application extracting heading data and ignoring the subheadings.
<hgroup>
<h1>Lost in Shangri-La:</h1>
<h2>A True Story of Survival, Adventure, and the Most Incredible Rescue Mission of World War II</h2>
</hgroup>
<hgroup>
<h1>Blood, Bones & Butter:</h1>
<h2>The Inadvertent Education of a Reluctant Chef</h2>
</hgroup>
The point of using <hgroup> in the examples above is to mask the <h2> element from the outline algorithm when browsers parse the web document coding.
Up next
In the next segment on HTML5 we will review the structural elements including header <header>, footer <footer>, navigation <nav> and more.*************************
