Home HTML5 – Section Tags

HTML5 – Section Tags

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


    <h1>Title goes here</h1>
    <h2>And subtitle...</h2>
    <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> |
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu diam magna...</p>
       <p>...angam maid ue essidnepsuS .tile gnicsipida rutetcesnoc ,tema tis rolod muspi meroL</p>
      <li>October 2011</li>
      <li>September 2011</li>
      <li>August 2011</li>
  <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

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.