Section Tag in HTML5

The section tag was introduced for better structure in HTML5 documents for those authors who require heavy editing features. The code: <section></section> Represents a generic document or application section.

It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure and level of importance.

The use of sections means that the author can use h1 elements throughout, without having to worry about whether a section is at a particular level.

Jumping Right In

For those who want to jump right in to using the new tags in HTML 5, the section tag can be used interchangeably with the division tag. Study the lessons on the division tag and apply all elements of use to the section tag.

Examples: Here is a graduation program with two sections, one for the ceremony outline and one for the list of cadets graduating.

<!DOCTYPE html>
<Html>
<Head>
<Title>Police Academy Graduation Ceremony</Title>
</Head>
<Body>
<H1>Graduation</H1>
<Section>
<H1>Ceremony</H1>
<P>Opening Procession</P>
<P>Speech by Mayor</P>
<P>Speech by Chief of Police</P>
</Section>
<Section>
<H1>Graduates</H1>
<Ul>
<Li>Benjamin Carpenter</Li>
<Li>Daniel Luccio</Li>
<Li>Colt McCoy</Li>
<Li>Eddie Murphy</Li>
</Ul>
</Section>
</Body>
</Html>

The code below would still be semantically correct for authors who don't require heavy editing features.

<Body>
<H1>Graduation</H1>
<H2>Ceremony</H2>
<P>Opening Procession</P>
<P>Speech by Mayor</P>
<P>Speech by Chief of Police</P>

<H2>Graduates</H2>
<Ul>
<Li>Benjamin Carpenter</Li>
<Li>Daniel Luccio</Li>
<Li>Colt McCoy</Li>
<Li>Eddie Murphy</Li>
</Ul>
</Body>

*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

The section tag accepts Global Attributes.

For a complete list of New HTML5 Elements visit W3.org

Section Tag in HTML5

Jumping Right In

Free Tools and Resources We Recommend