HTML Section Tag

17/09/2023

The HTML <section> element is a structural HTML5 element that represents a thematic grouping or section of content within a web page. It’s used to semantically mark up and structure the content on a web page, making it easier for both browsers and search engines to understand the organization of the page.

<section>
 <h2>Lorem ipsum.</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>

<section>
 <h2>Lorem ipsum.</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>

Semantic Meaning Of <section>

The <section> element is used to define a distinct section or thematic grouping of content within a web page. It’s often used to break up the content into meaningful sections, such as chapters, articles, or segments of a web page.

Can <section> Element Use Nested?

Yes, <section> element can use nested.

<section>
 <h2>Lorem ipsum.</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>

<section>
 <h2>Lorem ipsum.</h2>
 <section>
 <h3>Lorem</h3>
 <p>Lorem ipsum dolor sit amet.</p>
 </section>
</section>

Semantic Meaning Of <section>

The <section> element is used to define a distinct section or thematic grouping of content within a web page. Breaking up content into meaningful sections, like chapters or web page segments, is common.

Click for more information about Semantic HTML.

Default <section> CSS Structure

section {
  display: block;
}