HTML Section

« Prev Next »

The <section> tag is a semantic block-level element. It groups content by topic with a heading (e.g. <h1> - <h6>). It is designed to form part of the page’s structure.

html-section

When to use <section>

Use <section> to group related content and include a heading (e.g. <h2>, <h3>, etc.) to describe what the content is about, such as:

 

  • Blog sections
  • Service descriptions
  • Team member bios
  • FAQ pages
  • Product details

Syntax

<section>
  <h2>Section Title</h2>
  <p>Section content goes here...</p>
</section>

Example: Services Section

<section>
  <h2>Our Services</h2>
  <p>We offer web development, digital marketing, and SEO solutions tailored to your business needs.</p>
</section>
Run ›

Example: Multiple Sections on a Page

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

  <section>
    <h2>Portfolio</h2>
    <p>Check out our latest projects in web and mobile apps.</p>
  </section>

  <section>
    <h2>Contact</h2>
    <p>Reach out to us through email or phone for inquiries.</p>
  </section>
</main>
Run ›

When to Use <section>

Use Case Use <section>? Why?
Blog post area with a heading Yes Thematic content, useful with headings
Navigation bar No Use <nav> instead
Footer area No Use <footer> instead
Article content group Yes Helps group subtopics inside <article>
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.