The <section> tag in HTML is used to define a thematic grouping of content, typically with a heading, making the webpage more organized and meaningful.
- Represents a logical section of content (e.g., chapters, topics).
- Usually contains a heading (<h1> to <h6>).
- Helps improve semantic structure and readability of a webpage.
Note: Section tag is used to distribute the content i.e., it distributes the sections and subsections.
Syntax:
<section> Section Contents </section>Example: The implementation of the section tag
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<body>
<!-- html section tag is used here -->
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
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: The implementation of the nested section tag
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
text-align: center;
}
</style>
</head>
<body> <!-- html section tag is used here -->
<!--Driver Code Ends-->
<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>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->