Content grouping and structure

Sectioning content

Whenever a document is growing long in content, it may be convenient or even necessary, to divide it into sections. Thankfully, HTML5 has expanded the number of section types a document can be divided in. The following paragraphs, will cover some of the most important elements when defining sections in HTML documents.

The section element

The use of the section element is the most generic way to divide content into different sections. Unlike other more specific elements, section only expresses that the content delimited by its tags has been grouped (and separated from other content) because of its theme. This thematic disociation can be helpful for dividing the chapters in a novel or for separating different approaches in an analysis.

In the following example, a document resuming the biography of Mark Twain has been divided into generic sections according to the stages of his life.

<section>
  <p>Samuel Langhorne Clemens, later known as Mark Twain, was born in Florida, Missouri, on November 30, 1835. When he was four, Twain's family moved to Hannibal, Missouri, a port town on the Mississippi River that inspired the fictional town of St. Petersburg in The Adventures of Tom Sawyer.</p>
</section>
<section>
  <p>Throughout 1868, Twain and Olivia Langdon corresponded. Though she rejected his first marriage proposal, two months later, they were engaged. In February 1870, Twain and Langdon were married in Elmira, New York, where he courted her and managed to overcome her father's initial reluctance.</p>
</section>

Samuel Langhorne Clemens, later known as Mark Twain, was born in Florida, Missouri, on November 30, 1835. When he was four, Twain's family moved to Hannibal, Missouri, a port town on the Mississippi River that inspired the fictional town of St. Petersburg in The Adventures of Tom Sawyer.

Throughout 1868, Twain and Olivia Langdon corresponded. Though she rejected his first marriage proposal, two months later, they were engaged. In February 1870, Twain and Langdon were married in Elmira, New York, where he courted her and managed to overcome her father's initial reluctance.

Although not required, it's a good practice to precede the contents of a section with a heading. This practice can improove readability and allow browsers (and other document processors) to scan the document for parts of interest without having to process all the text in order to reach the information they're looking for.

Headings

In previous versions of the standard, headings were used on their own to define sections. Browsers and document processors used the information provided by headings to create an outline of the document's content. With the arrival of HTML5 and its sectioning elements, this has changed.

In this new scenario, sectioning elements are responsible for the division of the content while headings provide a title for the contents of each section. When this approach is used, the heading (usually an h1) precedes all the content in the section and provides a concise description about it.

The next example expands the previous by adding titles for each one of the sections already present.

<section>
  <h1>Early life</h1>
  <p>Samuel Langhorne Clemens, later known as Mark Twain, was born in Florida, Missouri, on November 30, 1835. When he was four, Twain's family moved to Hannibal, Missouri, a port town on the Mississippi River that inspired the fictional town of St. Petersburg in The Adventures of Tom Sawyer.</p>
</section>
<section>
  <h1>Marriage and children</h1>
  <p>Throughout 1868, Twain and Olivia Langdon corresponded. Though she rejected his first marriage proposal, two months later, they were engaged. In February 1870, Twain and Langdon were married in Elmira, New York, where he courted her and managed to overcome her father's initial reluctance.</p>
</section>

Early life

Samuel Langhorne Clemens, later known as Mark Twain, was born in Florida, Missouri, on November 30, 1835. When he was four, Twain's family moved to Hannibal, Missouri, a port town on the Mississippi River that inspired the fictional town of St. Petersburg in The Adventures of Tom Sawyer.

Marriage and children

Throughout 1868, Twain and Olivia Langdon corresponded. Though she rejected his first marriage proposal, two months later, they were engaged. In February 1870, Twain and Langdon were married in Elmira, New York, where he courted her and managed to overcome her father's initial reluctance.

Now we're going to add a section around all the content in the previous example, to see what happen to headings and their levels.

<section>
  <h1>Biography of Mark Twain</h1>
  <section>
    <h2>Early life</h2>
    <p>Samuel Langhorne Clemens, later known as Mark Twain, was born in Florida, Missouri, on November 30, 1835. When he was four, Twain's family moved to Hannibal, Missouri, a port town on the Mississippi River that inspired the fictional town of St. Petersburg in The Adventures of Tom Sawyer.</p>
  </section>
  <section>
    <h2>Marriage and children</h2>
    <p>Throughout 1868, Twain and Olivia Langdon corresponded. Though she rejected his first marriage proposal, two months later, they were engaged. In February 1870, Twain and Langdon were married in Elmira, New York, where he courted her and managed to overcome her father's initial reluctance.</p>
  </section>
</section>

Biography of Mark Twain

Early life

Samuel Langhorne Clemens, later known as Mark Twain, was born in Florida, Missouri, on November 30, 1835. When he was four, Twain's family moved to Hannibal, Missouri, a port town on the Mississippi River that inspired the fictional town of St. Petersburg in The Adventures of Tom Sawyer.

Marriage and children

Throughout 1868, Twain and Olivia Langdon corresponded. Though she rejected his first marriage proposal, two months later, they were engaged. In February 1870, Twain and Langdon were married in Elmira, New York, where he courted her and managed to overcome her father's initial reluctance.

You see, the headings of sections contained by the outer section ("Early life" and "Marriage and children") are now of level two. This makes sense since they both are sub-titles of the first heading. But HTML5 doesn't require things to be like this. An h1 heading is the main title of the section it's present in, and not of the entire document, so authors are free to use one or the other configuration.

Prev123Next