<section> : Section element

by

Introduction

The <section> element in HTML is a semantic element used to define sections or thematic groups of content within a document. It’s typically used to organize content into distinct sections that represent different themes or topics.

Here’s an example of how you might use the <section> element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Section Example</title>
</head>
<body>
    <h1>Website Title</h1>

    <nav>
        <!-- Navigation links -->
    </nav>

    <section>
        <h2>About Us</h2>
        <p>This section contains information about our company and its history.</p>
    </section>

    <section>
        <h2>Services</h2>
        <ul>
            <li>Service 1</li>
            <li>Service 2</li>
            <li>Service 3</li>
        </ul>
    </section>

    <section>
        <h2>Contact Us</h2>
        <p>You can contact us via email or phone.</p>
    </section>
</body>
</html>

Output :

In this example:

  • Three <section> elements are used to divide the content into thematic sections: “About Us“, “Services“, and “Contact Us“.
  • Each <section> contains related content, such as information about the company, a list of services, or contact details.
  • The <h2> elements inside each section provide a heading for that particular section, helping to structure and organize the content.

Using <section> elements helps improve the semantic structure of the HTML document, making it more accessible to users and search engines and providing a clear hierarchy of content.

Leave a Comment