HowToDoInJava

  • Python
  • Java
  • Spring Boot
  • Dark Mode
Home / HTML5 / HTML5 – Section Tag Example

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 !!

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.
TwitterFacebookLinkedInRedditPocket

About Lokesh Gupta

A family guy with fun loving nature. Love computers, programming and solving everyday problems. Find me on Facebook and Twitter.

Comments are closed on this article!

Search Tutorials

Meta Links

  • About Me
  • Contact Us
  • Privacy policy
  • Advertise
  • Guest and Sponsored Posts

Recommended Reading

  • 10 Life Lessons
  • Secure Hash Algorithms
  • How Web Servers work?
  • How Java I/O Works Internally?
  • Best Way to Learn Java
  • Java Best Practices Guide
  • Microservices Tutorial
  • REST API Tutorial
  • How to Start New Blog

Copyright © 2020 · HowToDoInjava.com · All Rights Reserved. | Sitemap

  • Sealed Classes and Interfaces