<section>

Syntax

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

Examples

<section>
  <h2>Features</h2>
  <p>Everything you need to learn to code.</p>
</section>

<section>
  <h2>Pricing</h2>
  <p>Free forever for individual learners.</p>
</section>

<article>
  <h1>The Complete Guide to Flexbox</h1>
  <section>
    <h2>What is Flexbox?</h2>
    <p>Flexbox is a one-dimensional layout model...</p>
  </section>
  <section>
    <h2>Main Properties</h2>
    <p>justify-content, align-items, and flex-direction...</p>
  </section>
</article>

<section style="padding: 40px 20px; background: #f9fafb; border-radius: 12px;">
  <h2 style="margin-bottom: 12px;">Why Choose Us</h2>
  <p>We focus on practical, hands-on learning.</p>
</section>

Best practices

• Only use <section> when the content is thematically related and would make sense with its own heading
• If you just need a styling hook with no semantic meaning, use <div> instead
• Give each <section> a heading (<h2>-<h6>) so it makes sense in a document outline
• Do not use <section> as a wrapper purely for CSS layout purposes — that dilutes its semantic value

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard