The HTML <section> element represents a thematic grouping of related content within a web page. It is commonly used to divide a document into meaningful parts such as courses, services, features, chapters, or topics.

Key Point: Use <section> when a group of content forms a meaningful topic or part of the document.

1. What is the section Element?

The <section> element is a semantic HTML element used to group related content around a common theme.

<section>

    <h2>HTML Forms</h2>

    <p>
        Learn how to create HTML forms.
    </p>

</section>

Output

HTML Forms

Learn how to create HTML forms.

2. Purpose of the section Element

A section groups content that belongs together conceptually. Each section should represent a meaningful part of the document.

Examples include:

Introduction section
Course section
Services section
Features section
Testimonials section
Contact section

3. Basic Section Example

<section>

    <h2>About Us</h2>

    <p>
        We provide technology training programs.
    </p>

</section>

4. Section with Heading

A section commonly contains a heading that describes the topic of the section.

<section>

    <h2>Our Courses</h2>

    <p>
        Explore our technology courses.
    </p>

</section>

A heading makes the purpose of the section easier to understand.

5. Multiple Sections

A page can contain multiple sections, each representing a different topic.

<section>

    <h2>HTML</h2>

    <p>
        Learn HTML fundamentals.
    </p>

</section>

<section>

    <h2>CSS</h2>

    <p>
        Learn CSS styling.
    </p>

</section>

<section>

    <h2>JavaScript</h2>

    <p>
        Learn JavaScript programming.
    </p>

</section>

6. Section Inside main

Sections are commonly placed inside the main content area.

<main>

    <section>

        <h2>HTML Basics</h2>

        <p>
            Learn the fundamentals of HTML.
        </p>

    </section>

    <section>

        <h2>HTML Forms</h2>

        <p>
            Learn how to create HTML forms.
        </p>

    </section>

</main>

7. Section with Article

A section can contain multiple independent articles.

<section>

    <h2>Latest Tutorials</h2>

    <article>

        <h3>HTML Basics</h3>

        <p>
            Learn the fundamentals of HTML.
        </p>

    </article>

    <article>

        <h3>HTML Forms</h3>

        <p>
            Learn how to create HTML forms.
        </p>

    </article>

</section>

8. Section with Header

A section can have its own header containing introductory content.

<section>

    <header>

        <h2>HTML Course</h2>

        <p>
            Learn HTML step by step.
        </p>

    </header>

    <p>
        Course content starts here.
    </p>

</section>

9. Section with Footer

A section can also contain footer-related information for that section.

<section>

    <h2>HTML Course</h2>

    <p>
        Learn HTML from basic to advanced topics.
    </p>

    <footer>
        Updated October 2026
    </footer>

</section>

10. Nested Sections

Sections can be nested when the content hierarchy contains meaningful subsections.

<section>

    <h2>Web Development</h2>

    <section>

        <h3>Frontend Development</h3>

        <p>
            Learn HTML, CSS and JavaScript.
        </p>

    </section>

    <section>

        <h3>Backend Development</h3>

        <p>
            Learn server-side programming.
        </p>

    </section>

</section>

11. Section with ID

An id can be used to uniquely identify a section, especially when another part of the page needs to link to it.

<section id="html-basics">

    <h2>HTML Basics</h2>

    <p>
        Learn HTML fundamentals.
    </p>

</section>

12. Linking to a Section

A navigation link can point directly to a section using its id.

<nav>

    <a href="#html-basics">
        HTML Basics
    </a>

    <a href="#html-forms">
        HTML Forms
    </a>

</nav>

<section id="html-basics">

    <h2>HTML Basics</h2>

</section>

<section id="html-forms">

    <h2>HTML Forms</h2>

</section>

13. Section for Services

<section>

    <h2>Our Services</h2>

    <p>
        We provide professional technology training.
    </p>

    <ul>

        <li>
            Corporate Training
        </li>

        <li>
            Software Training
        </li>

        <li>
            Career Training
        </li>

    </ul>

</section>

14. Section for Features

<section>

    <h2>Course Features</h2>

    <ul>

        <li>
            Live Projects
        </li>

        <li>
            Interview Preparation
        </li>

        <li>
            Practical Training
        </li>

    </ul>

</section>

15. Section for Testimonials

<section>

    <h2>Student Testimonials</h2>

    <article>

        <h3>Student Review</h3>

        <p>
            The training was practical and easy to understand.
        </p>

    </article>

</section>

16. section vs div

Element	Purpose
`<section>`	Groups related content around a meaningful theme.
`<div>`	Generic container without specific semantic meaning.

17. section vs article

Element	Purpose
`<section>`	Groups related content within a larger document.
`<article>`	Represents content that can stand independently.

18. Section and Accessibility

Meaningful sections help provide structure to a document. A clear heading hierarchy also makes each section easier to understand.

<section>

    <h2>HTML Forms</h2>

    <p>
        Learn form controls and validation.
    </p>

</section>

19. Section for a Course Module

<section>

    <h2>Module 1: HTML Basics</h2>

    <section>

        <h3>HTML Introduction</h3>

        <p>
            Learn what HTML is.
        </p>

    </section>

    <section>

        <h3>HTML Elements</h3>

        <p>
            Learn about HTML elements.
        </p>

    </section>

</section>

20. Complete Web Page Example

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>
        Learning Portal
    </title>

</head>

<body>

    <header>

        <h1>
            Learning Portal
        </h1>

    </header>

    <nav>

        <a href="#html">HTML</a>
        <a href="#css">CSS</a>
        <a href="#javascript">JavaScript</a>

    </nav>

    <main>

        <section id="html">

            <h2>
                HTML Course
            </h2>

            <p>
                Learn HTML from basics to advanced topics.
            </p>

        </section>

        <section id="css">

            <h2>
                CSS Course
            </h2>

            <p>
                Learn how to style web pages.
            </p>

        </section>

        <section id="javascript">

            <h2>
                JavaScript Course
            </h2>

            <p>
                Learn JavaScript programming.
            </p>

        </section>

    </main>

    <footer>

        <p>
            © 2026 Learning Portal
        </p>

    </footer>

</body>

</html>

21. Common Mistakes

Mistake 1: Using section for every container

Not every visual container is a section. Use <section> when the content represents a meaningful thematic group.

Mistake 2: Missing a meaningful heading

Sections are easier to understand when their purpose is identified by an appropriate heading.

Mistake 3: Replacing every div with section

A <div> is still useful for generic grouping and styling when there is no specific semantic meaning.

22. Best Practices

Use sections for meaningful thematic groups.
Give sections clear headings where appropriate.
Use IDs when sections need direct navigation links.
Nest sections only when the content hierarchy is meaningful.
Use <article> when content is independently distributable.
Use <div> for generic containers without semantic meaning.

23. Practice Example

Create a page containing three sections: HTML, CSS, and JavaScript.

<main>

    <section id="html">

        <h2>
            HTML
        </h2>

        <p>
            Learn how to structure web pages.
        </p>

    </section>

    <section id="css">

        <h2>
            CSS
        </h2>

        <p>
            Learn how to style web pages.
        </p>

    </section>

    <section id="javascript">

        <h2>
            JavaScript
        </h2>

        <p>
            Learn how to add interactivity to web pages.
        </p>

    </section>

</main>

Summary

The HTML <section> element groups related content around a meaningful topic. It is commonly used with headings and can contain articles, headers, footers, lists, and other content. Use sections for meaningful thematic groups and use <div> when a generic container is sufficient.

← Previous: Main Next: Article →