HTML5 – Section Tag Example

The HTML5 <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. Previously (before HTML5), only way to provide such separation was possible through only <div> tags.

section element is a semantic element. This means that it provides meaning to both user agents and humans about what the enclosed content is—specifically a section of the document. It is a generic semantic element so you should use it when none of the other semantic container elements (article, aside and nav) are appropriate.

Section Tag Syntax

When creating a <section> in HTML5, as when you used the <div> tag in HTML, you can use either the id or class attributes. Each id must be unique, as in HTML, and class can be used multiple times when necessary.

You should always have a header element (H1 through H6) as a part of the section. If you can’t come up with a title for the section, then again the <div> element is probably more appropriate. And never ever use section tag for putting styles only.

Let’s say you were creating a document about data processing. The following represents a typical use for the <section> elements.

<section id="preparation" class="imaginaryClass">
     <h2>Prepare Data</h2>
     <p>Random text Random text Random text...</p>
</section>
<section id="processing">
     <h2>Process Prepared Data</h2>
     <p>Some More Random text Some More Random text Some More Random text ...</p>
</section>
<section id="display">
     <h2>Processed Data</h2>
     <p>Some More Random text Some More Random text Some More Random text ...</p>
</section>

Summary

The purpose of the <section></section> element is not to replace the HTML <div> tag. If you are dividing your document into logical document sections (to define semantically discrete portions of the content), use the <section></section> element or one of the structural elements. However, if you are dividing the document only for purposes of formatting, then the <div> tag is appropriate to use.

If you are using them correctly, you can use both DIV and SECTION elements together in a valid HTML5 document.

Happy Learning !!