Learn how to use the HTML <section> element to group thematic content correctly, ensuring accessibility and semantic structure.
What it is
The <section> element represents a standalone section of a document or application. It groups related content together under a common theme. Unlike generic containers like <div>, a <section> implies that the content inside is thematically linked and usually requires a heading (<h1>–<h6>) to describe its purpose.
Mental Model: Think of a book chapter. Each chapter has a title (heading) and contains paragraphs about a specific topic. The <section> is the chapter wrapper; the heading is the chapter title.
Related terms: <article> (self-contained composition), <nav> (navigation links), <aside> (tangentially related content).
Why it matters
- Accessibility: Screen readers use sections and headings to create an outline of the page, allowing users to jump between topics efficiently.
- SEO: Search engines better understand the structure and relevance of your content when it is semantically grouped.
- Maintainability: Clear structural boundaries make CSS styling and JavaScript targeting more predictable.
- Standards Compliance: Using correct semantic elements ensures your code adheres to modern HTML5 standards.
Syntax or steps
The basic pattern for a valid section includes two mandatory parts: the opening/closing tags and a heading.
- Open with
<section>. - Immediately include a heading tag (
<h1>through<h6>). This is critical; a section without a heading is generally considered invalid or poor practice. - Add the thematic content (paragraphs, images, lists, etc.).
- Close with
</section>.
Example
<section>
<h2>Latest News</h2>
<p>Here are the top stories from today.</p>
<ul>
<li>Story One</li>
<li>Story Two</li>
</ul>
</section>Explanation:
<section>: Defines the start of the thematic group.<h2>Latest News</h2>: Provides the required label for this section. Note that we used<h2>assuming there is already an<h1>elsewhere on the page.<p>and<ul>: These are the actual content items belonging to the "Latest News" theme.</section>: Closes the group.
Common mistakes
- Missing Headings: Using
<section>without a heading breaks the document outline. Always pair them. - Overusing Sections: Do not wrap every single paragraph in a section. Only use it when there is a distinct thematic break.
- Confusing with Articles: If the content makes sense on its own outside the context of the page (like a blog post), use
<article>. If it is just a part of the whole page (like a contact form area), use<section>. - Nesting Incorrectly: Avoid nesting sections unnecessarily deep. Keep the hierarchy flat where possible for clarity.
When to use it
Compare <section> with <div> and <article>:
| Element | Use When... | Heading Required? |
|---|---|---|
<section> |
Grouping thematic content within a larger page (e.g., "About Us", "Services"). | Yes |
<div> |
Layout purposes only, with no semantic meaning (e.g., flexbox containers). | No |
<article> |
Self-contained compositions that could be syndicated (e.g., blog posts, comments). | Yes |
Practice
Guided Exercise: Create a simple webpage with a main header and three sections: "Introduction", "Features", and "Contact". Ensure each section has an appropriate heading level.
Challenge: Take a poorly structured HTML snippet using multiple <div>s for layout and convert it to use <section> and <article> appropriately. Hint: Look for distinct topics vs. self-contained pieces.
Quick check
Question: Can you use a <section> element without a heading?
Answer: Technically yes, but it is strongly discouraged and often considered invalid by validators because it fails to define the section's purpose for assistive technologies.
Summary
The <section> element is vital for creating a logical, accessible document outline. Always pair it with a heading to clearly define the thematic boundary of the content it contains.