Last Updated : 27 Aug, 2024
Summarize
Comments
Improve
The Section tag defines the section of documents such as chapters, headers, footers, or any other sections. The section tag divides the content into sections and subsections.
The section tag is used when requirements of two headers or footers or any other section of documents are needed. Section tag grouped the generic block of related contents. The main advantage of the section tag is, it is a semantic element, that describes its meaning to both the browser and the developer.
Note: Section tag is used to distribute the content i.e., it distributes the sections and subsections.
Syntax
<section> Section Contents </section>Example 1:The implementation of the section tag
<!DOCTYPE html><html><body> <!-- html section tag is used here --> <section> <h1> Geeksforgeeek: Section 1 </h1> <p> Content of section 1 </p> </section> <section> <h1> GeeksforGeeks: Section 2 </h1> <p> Content of section 2 </p> </section> <section> <h1> GeeksforGeeks: Section 3 </h1> <p> Content of section 3 </p> </section></body></html>
Output:
Nested Section tag:
The section tag can be nested. The font size of subsection is smaller than section tag if the text contains the same font property. The subsection tag is used for organizing complex documents. A rule of thumb is that section should logically appear in outline of the document.
Example 2:The implementation of the nested section tag
<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> body { text-align: center; } </style></head><body> <!-- html section tag is used here --> <section> <h1 style="color: green;"> Geeksforgeeek: Section 1 </h1> <p> Content of section 1 </p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section> <section> <h1>GeeksforGeeks: Section 2</h1> <p>Content of section 2</p> <section> <h1>Subsection</h1> <h1>Subsection</h1> </section> </section></body></html>
Output:
Supported Browsers:
HTML <section> Tag – FAQs
What is the difference between the <section> and <div> tags?
The <section> tag is a semantic element that should be used for thematically related content, typically accompanied by a heading. The <div> tag is a non-semantic container used purely for grouping content without implying any relationship or meaning.
When should I use the <section> tag versus the <article> tag?
Use the <section> tag for grouping related content under a common theme within a larger piece, like dividing a webpage into sections. The <article> tag is better suited for standalone content that could be distributed independently, like a blog post or news article.
See AlsoBlock and Inline Elements
Should every <section> tag have a heading?
Yes, according to best practices, every <section> element should include a heading (<h1> to <h6>). This helps define the purpose of the section and aids screen readers and search engines in understanding the content.
Can I nest multiple <section> tags within each other?
Yes, you can nest <section> tags to create subsections. This is useful when you need to divide content into multiple hierarchical levels, each with its own heading.
Is the <section> tag required in HTML5?
No, the <section> tag is not required, but it is recommended for improving the semantic structure of your content. It’s particularly useful when you want to give structure to long pages with multiple distinct sections.
Improve
