HTML Free Codes<section>
Defines a thematic grouping of content
✨ HTML5Definition and Usage
The <section> element establishes a section in a document.
A section is a thematic grouping of content, typically with a heading. Sections are used to organize page content into logical groups.
Examples of where a <section> element can be used:
- Chapters in a document
- Numbered sections in a thesis
- Different tabs in a tabbed dialog box
- Thematic groups on a home page (introduction, features, testimonials)
- Parts of an article (introduction, main content, conclusion)
Tip: Each
<section> should typically include a heading (<h1>-<h6>) to identify the theme of the section.
Note: The
<section> element is new in HTML5 and helps with document structure and accessibility.
Browser Support
The <section> tag is supported in all major browsers:
Chrome
5.0+
Firefox
4.0+
Safari
5.0+
Edge
9.0+
Opera
11.1+
Attributes
The <section> tag supports the Global Attributes in HTML.
The <section> tag also supports the Event Attributes in HTML.
Examples
Basic Section with Heading
Create a simple thematic section:
Example
<section>
<h2>Introduction</h2>
<p>This is the introductory section of the document.</p>
<p>It provides background information and context.</p>
</section>Article with Multiple Sections
Divide an article into logical sections:
Example
<article>
<h1>Understanding HTML5 Sections</h1>
<section>
<h2>Introduction</h2>
<p>HTML5 introduced semantic elements for better document structure.</p>
</section>
<section>
<h2>Main Concepts</h2>
<p>Sections help organize content into thematic groups.</p>
</section>
<section>
<h2>Conclusion</h2>
<p>Using sections improves accessibility and SEO.</p>
</section>
</article>Landing Page Sections
Structure a landing page with thematic sections:
Example
<main>
<section id="hero">
<h1>Welcome to Our Website</h1>
<p>Discover amazing products and services.</p>
</section>
<section id="features">
<h2>Features</h2>
<ul>
<li>Fast Performance</li>
<li>Easy to Use</li>
<li>Secure</li>
</ul>
</section>
<section id="testimonials">
<h2>What Our Customers Say</h2>
<blockquote>This product changed my life!</blockquote>
</section>
<section id="contact">
<h2>Contact Us</h2>
<p>Email: info@example.com</p>
</section>
</main>Nested Sections
Create hierarchical content structure:
Example
<section>
<h2>Chapter 1: Getting Started</h2>
<section>
<h3>1.1 Installation</h3>
<p>Follow these steps to install the software...</p>
</section>
<section>
<h3>1.2 Configuration</h3>
<p>Configure your settings as follows...</p>
</section>
<section>
<h3>1.3 First Steps</h3>
<p>Now you're ready to begin...</p>
</section>
</section>Section with ARIA Label
Improve accessibility with ARIA labels:
Example
<section aria-label="Product specifications">
<h2>Technical Specifications</h2>
<dl>
<dt>Processor:</dt>
<dd>Intel Core i7</dd>
<dt>Memory:</dt>
<dd>16GB RAM</dd>
<dt>Storage:</dt>
<dd>512GB SSD</dd>
</dl>
</section>Styled Sections with CSS
Apply custom styling to sections:
Example
<style>
section {
margin: 40px 0;
padding: 30px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
section h2 {
color: #745af2;
border-bottom: 3px solid #745af2;
padding-bottom: 10px;
margin-bottom: 20px;
}
section:nth-child(even) {
background: #e8f4f8;
}
</style>
<section>
<h2>Styled Section</h2>
<p>This section has custom CSS styling applied.</p>
</section>Try it Yourself
Interactive Example
Here's a live example of styled sections:
Section 1: Features
This is the first thematic section with specific content about features.
Section 2: Benefits
This is the second thematic section describing benefits.
Section 3: Pricing
This is the third thematic section with pricing information.
Section vs Article vs Div
| Element | Purpose | When to Use |
|---|---|---|
<section> |
Thematic grouping of content | Use for chapters, tabs, or numbered sections that have a heading and form a logical group |
<article> |
Self-contained, independent content | Use for blog posts, news articles, forum posts, or content that could be syndicated |
<div> |
Generic container | Use for styling or grouping when no semantic meaning applies |
When to Use Section
- Should have a heading: If your content doesn't have a natural heading, use
<div>instead - Thematic grouping: Content within a section should be related by theme
- Part of a larger document: Sections are typically parts of articles or pages, not standalone
- Not for styling: Don't use section just to apply CSS styles; use
<div>for that
Rule of Thumb: If you can't think of a heading for the content, it probably shouldn't be a
<section>.
Accessibility and ARIA
- Always include a heading element within each section
- Use
aria-labeloraria-labelledbyto provide accessible names when needed - Screen readers can navigate by sections, improving document navigation
- Proper heading hierarchy (h1-h6) within sections helps assistive technology
- Sections create landmark regions that users can jump to
Accessibility Example
<section aria-labelledby="about-heading">
<h2 id="about-heading">About Us</h2>
<p>Learn more about our company and mission.</p>
</section>Best Practices
- Always include a heading (
<h1>-<h6>) as the first element in a section - Use sections for thematic groups of content, not just for styling purposes
- Maintain a logical heading hierarchy within your sections
- Don't use section as a wrapper for styling; use
<div>instead - Consider if
<article>is more appropriate for self-contained content - Use semantic structure to improve SEO and accessibility
- Sections can be nested to create hierarchical document structures
- Add
idattributes to sections for anchor links and navigation
Default CSS Settings
Most browsers will display the <section> element with the following default values:
Default CSS
section {
display: block;
}