HTML <section> Tag
The <section> tag in HTML is a semantic element used to group related content within a web page. It represents a thematic grouping of content, typically with a heading. It's essential for creating well-structured, accessible, and maintainable HTML documents. Unlike generic <div> elements, <section> elements imply a logical division of content, aiding both human readers and assistive technologies in understanding the page structure.
Syntax
<section>
<!-- Section content goes here -->
<h1>Section Heading</h1>
<p>Section paragraph content...</p>
</section>
Attributes
| Attribute | Value | Description |
|---|---|---|
class |
class names | Specifies one or more class names for styling purposes. |
id |
unique id | Specifies a unique ID for the element, often used for linking or scripting. |
style |
CSS properties | Specifies inline CSS styles for the element. |
title |
text | Specifies extra information about the element, often shown as a tooltip. |
lang |
language code | Specifies the language of the element’s content. |
dir |
ltr or rtl |
Specifies the text direction. |
accesskey |
character | Specifies a keyboard shortcut to access the element. |
contenteditable |
true or false |
Specifies if the content is editable by user |
contextmenu |
element ID | Specifies a context menu for the element |
draggable |
true, false, or auto |
Specifies if the element is draggable |
dropzone |
copy, move, or link |
Specifies what happens when an element is dropped on it |
hidden |
hidden |
Specifies that the element is not yet, or is no longer, relevant |
spellcheck |
true or false |
Specifies whether the element should have its spelling and grammar checked |
tabindex |
number | Specifies the tab order of the element |
Example
<section>
<h1>About Us</h1>
<p>Our company was founded in 2023 with the goal to create world-class web development content.</p>
</section>
More Examples
Example 1: Basic Structure with Multiple Sections
<main>
<section>
<h2>Introduction</h2>
<p>Welcome to our site! Here's a brief overview of what we do.</p>
</section>
<section>
<h2>Services</h2>
<ul>
<li>Web Development</li>
<li>Mobile App Development</li>
<li>UI/UX Design</li>
</ul>
</section>
<section>
<h2>Contact Us</h2>
<p>Feel free to reach out to us at [email protected].</p>
</section>
</main>
This example demonstrates a typical use of <section> to divide the main content of a page into logical sections such as introduction, services, and contact information.
Example 2: Section with an Article Inside
<section>
<h2>Latest News</h2>
<article>
<h3>New Feature Launched!</h3>
<p>We're excited to announce the release of our latest feature. This is an article within the section.</p>
<p><a href="#">Read More</a></p>
</article>
</section>
Here, the <section> contains a grouping of content related to "Latest News", and an <article> element represents a standalone piece of content within that section. This combination is often used to structure news, blog or other similar types of content.
Example 3: Nested Sections
<section>
<h2>Our Products</h2>
<section>
<h3>Software</h3>
<p>Our best software solutions.</p>
</section>
<section>
<h3>Hardware</h3>
<p>Our high quality hardware products.</p>
</section>
</section>
This demonstrates how sections can be nested inside of one another, to create more granular structures.
Example 4: Section with a class for styling
<section class="featured-section">
<h2>Featured Content</h2>
<p>Check out our featured content this week!</p>
</section>
Using a class attribute is a typical way to add specific styles to your sections.
Browser Support
The <section> tag is widely supported in modern browsers:
- Chrome: Supported
- Edge: Supported
- Firefox: Supported
- Safari: Supported
- Opera: Supported
Notes and Tips
- Use with Headings: Each
<section>should typically have a heading (<h1>–<h6>) to clearly indicate its purpose. This is vital for accessibility and SEO. - Not a Generic Container: Don't use
<section>as a generic container for styling. Use<div>elements for that purpose.<section>is specifically for grouping thematically related content. - When to use
<article>: Use the<article>tag for standalone content within a section or independently (e.g. a blog post, a news item) where its content could make sense on its own. - Accessibility: Screen readers use the heading structure within sections to help users navigate your site.
- Semantic Meaning: Using
<section>correctly enhances the semantic structure of your HTML, making it easier for search engines and assistive technologies to understand the content's organization. - Avoid overuse: Don't over use the tag. Structure your page logically and nest only when there is a clear need to create sub-sections.
- Use in conjunction with
<nav>andaside:<section>works well with other semantic elements like<nav>(for navigation) and<aside>(for secondary content) to create a well-organized page structure. - SEO Benefits: A well-structured page using semantic tags can improve your site's SEO by making it easier for search engines to understand the content and hierarchy.
