Structuring with <section> - Intro to HTML & CSS

What is the <section> Element?

The <section> element is a semantic HTML5 tag used to group related content together. It represents a thematic grouping of content, typically with a heading, and is useful for organizing your web pages into logical sections.

Why Use <section>?

Improves the structure and readability of your HTML.
Helps search engines and assistive technologies understand your content.
Makes your code more organized and maintainable.

Example: Grouping Content with <section>

<section>
    <h2>About Us</h2>
    <p>We are a team of passionate developers.</p>
</section>

<section>
    <h2>Contact Us</h2>
    <p>Email: contact@example.com</p>
</section>

In this example, the <section> element is used to group content into "About Us" and "Contact Us" sections, making the page more organized.

When Should You Use <section>?

To group related content under a common theme.
To divide a page into logical sections, such as introduction, features, and contact.
To improve the semantic structure of your HTML.

Practice: Try It Yourself

Project: Portfolio Sections
Create a portfolio page with sections for "About Me," "Projects," and "Contact." Use headings and paragraphs within each section.
Project: Product Page
Build a product page with sections for "Features," "Pricing," and "Reviews." Add headings and content to each section.

Continue Learning

Quick Check

The <section> element groups content by a common theme. True or False?