HTML Section Tag: How It Works with Examples

The HTML section tag groups parts of a web page that share one theme. It gives clear meaning to content. It helps screen readers and search engines see what each part does.

Understand the <section> Tag in HTML

The <section> tag shows one part of a page. It holds related elements that follow one theme. A page can hold many sections for different topics. Each section often starts with a heading.

The syntax looks like this:

<section>
  <h2>Title</h2>
  <p>Some text here.</p>
</section>

You write it like this to set clear blocks. The <h2> tag shows the section’s topic. The <p> tag holds the text. This helps users read content in steps.

Use <section> if the block has a topic. Use <div> if you only group items without meaning. For example, a <div> wraps many images for styling. A <section> groups content about one subject.

Here is a quick example:

<section>
  <h2>Latest News</h2>
  <article>Here is a story about a recent event.</article>
</section>

This shows the news part of the page. The section holds the heading and the article.

A heading gives the section a clear title. This helps people scan the page. It also helps screen readers list each part by name. Each heading marks where the section starts.

Nest Multiple <section> Elements

You can place a <section> inside another <section>. This shows subtopics under one theme. You must not nest many levels. This can confuse people who read the page with assistive tools.

Limit nesting to two or three layers. Each layer must show a smaller topic inside the bigger topic. This helps you set a clear page outline.

Here is an example:

<section>
  <h2>Course Outline</h2>
  <section>
    <h3>Module 1: Basics</h3>
    <p>This module teaches HTML and CSS. It explains the syntax of tags. It shows how to build pages that use simple styles.</p>
  </section>
</section>

The outer section marks the course content as one unit. The inner section shows Module 1 as a part of that course. This helps you set a clear structure. Screen readers can find the module under the course easily. Each section has one heading to mark its purpose.

For another example:

<section>
  <h2>2025 Annual Report</h2>
  <section>
    <h3>Q1 Results</h3>
    <p>This part shows how much revenue the company earned in Q1. It states that the revenue grew by ten percent compared to last year.</p>
  </section>
</section>

The outer section shows the annual report as one block. The nested section shows the Q1 part. This sets clear parts of the report. It helps readers find each quarter’s results. You also see which quarter the text describes.

How to Style <section> Tag in HTML

You can style a section with CSS. This makes each section stand out. Use this format when writing your code.

section {
  padding: 16px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 20px;
}

This adds space around the content. It sets a light background color. It rounds the corners. The margin leaves space after the section.

Difference Between <section>, <article>, and <aside>

The <section> tag shows a part of a page with one theme while the <article> tag holds a block of content that stands alone. The <aside> tag holds text related to the main text but not part of it.

Here are the use case:

• The <section> used to group text about one topic on a page.
• Use <article> to hold one blog post or one news story.
• The <aside> used to show tips or related links near the main text.

Examples of <section>Tag in HTML

Services Section:

<section>
  <h2>Our Services</h2>
  <p>We build websites and design logo.</p>
</section>

This section holds the services list. Each sentence states one task the business offers. A heading marks the topic. The section keeps the services in one place.

Contact Information:

<section>
  <h2>Contact Us</h2>
  <p>Call us at 555-1234. Email us at [email protected].</p>
</section>

This section shows how to reach the company. It gives a phone number and an email. The heading shows that this part holds contact data.

Team Members:

<section>
  <h2>Meet the Team</h2>
  <ul>
    <li>Sarah - Developer</li>
    <li>James - Designer</li>
  </ul>
</section>

This section lists the team members. Each list item states a name and a role. The heading sets the topic. The list keeps the data clear.

Testimonials:

<section>
  <h2>Client Feedback</h2>
  <blockquote>They built our site fast and met all needs.</blockquote>
</section>

This section holds a quote from a client. The heading names the block. The quote shows what the client said. This keeps feedback in a clear place.

Wrapping Up

In this article, you learn how the HTML section tag sets clear parts of a page. You also see how to nest sections and style them. You see how it differs from <article> and <aside>.

Here is a quick recap:

• Use <section> to group content by topic.
• Start each section with a heading.
• Limit nesting to a few levels.
• Style sections with CSS.
• Know when to use <section>, <article>, and <aside>.
• Check examples to see how each use looks.

FAQs

<section>
  <h2>About Us</h2>
  <p>We build websites.</p>
</section>

<div>
  <p>Styled block with no theme.</p>
</div>

<section>
  <h2>Services</h2>
  <p>We design logos.</p>
</section>

<section>
  <h2>Annual Report</h2>
  <section>
    <h3>Q1 Results</h3>
    <p>Revenue increased by 10%.</p>
  </section>
</section>

<section>
  <h2>Contact</h2>
  <p>Email us at [email protected].</p>
</section>

Similar Reads