Section tags help you to organize the flow of the content in a webpage and easily reuse its elements somewhere else. They effectively replace generic <div> tags giving more meaningful options for your code. It’s very useful for syndication and dynamically compounding your content from different sources. It’s also useful when writing a book or a blog for instance, with different pages and subjects grouped into sections.
On a lower level, it means having the section as a main node into the document structure, and having all the subsequent elements linked into it. Expanding this structure, should be something like this:
section | +--h1 (first heading, child of section) | | | +--text node "Hello WebWorld" | +--p (child of section, sibling of h1) | +--text node "This is your text" |
Section, article and aside
The main tag is <section>, and as suggested by the name, it’s a thematic grouping of content, typically with a heading. The section tag is generic and can be adjusted to the division of your content, for instance, introduction, development, conclusion and further information can be each a different section.
But if the content will be syndicated to other pages, the <article> tag should be used instead. Article creates a section or self-contained element that is independently distributable or reusable. More than that, it helps you maintaining the layout of your documentation by separating different headings – so when you define <h1>- <h6> tags in different articles, the previous will not interfere in the next one.
The <aside> tag defines content that is tangentially related to the content around the aside element, and which could be considered separate from that content. An example could be a side note about a specific country in an article about Europe, or links for Archives of a blog. The aside tag can also be used to quote texts and sidebars, to include advertising or any other content considered separated from the main content.
More new sectioning tags
Inside a section, article or aside area, these tags may be used:
<header> – represents a group of introductory or navigational aids, creating the outline for the document. Usually contain the section headings, but can also be used to wrap a section’s contents, a search form or relevant logos.
<hgroup>- the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.
<figure>, <figcaption> – a figure is an element representing graphics inside the content, generally used to annotate illustrations, diagrams, photos, code listings, etc. The caption is represented by the optional figcaption element.
<nav> – used to represent a block of navigation links referent to a section
<footer> – serves its nearest ancestor sectioning content(article, aside, nav, section) usually with information about the section such as links, copyright data, author information.
Sample Code
<header>
<h1>Title goes here</h1>
<h2>And subtitle...</h2>
</header>
<nav><a href="/en-us/home/">Home</a> |
<a href="/en-us/blog/">Blog</a> |
<a href="/en-us/about/">About</a> |
<a href="/en-us/contact/">Contact</a> |
</nav>
<article>
<h1>Article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam magna...</p>
<section>
<h1>Section</h1>
<p>...angam maid ue essidnepsuS .tile gnicsipida rutetcesnoc ,tema tis rolod muspi meroL</p>
</section>
</article>
<aside>
<h1>Archives</h1>
<ul>
<li>October 2011</li>
<li>September 2011</li>
<li>August 2011</li>
</ul>
</aside>
<footer>AppUp<sup>SM</sup> Developer Program</footer>
Existing sectioning tags
Other pre-existing tags for sectioning content and supported by the new spec are:
<body> – represents the main content of the document. There is only one body element in a HTML conforming page.
<address> – in previous HTML versions, this would represent the contact information for the author or owner of the page. In HTML5, the address tag can be inserted into an article, and by that representing the contact information for the author/owner of that article
Source Intel AppUp developer program
