HTML5 - Section tags

Table of Contents

Intel AppUp® Encapsulator Compatibility for this Article
FeatureSupported?FeatureSupported?
Section yes Article yes
Aside yes Header yes
Hgroup yes Footer yes
Figure yes Figcaption yes
Nav yes

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.

HTML5 Section demo

Title goes here

And subtitle...

Home | Blog | About | Contact |

Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam magna...

Section

...angam maid ue essidnepsuS .tile gnicsipida rutetcesnoc ,tema tis rolod muspi meroL

Archives

  • October 2011
  • September 2011
  • August 2011
AppUpSM Developer Program -->
<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>Intel AppUp&reg; center</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

More resources

For more details and examples on HTML5 Section tags, may I suggest:

  1. Dive Into HTML5, the online version of the great HTML5: Up and Running book

  2. HTML 5 Reference on Section tags

  3. For more demos and examples

Для получения подробной информации о возможностях оптимизации компилятора обратитесь к нашему Уведомлению об оптимизации.