Open navigation menu

Section and Aside Layout

Creates a content layout using section and aside elements with proper heading hierarchy for main content and complementary sidebar information.

HtmlData Fetching

Code

snippet
<main>
  <section aria-labelledby="features-heading">
    <h2 id="features-heading">Features</h2>
    <p>Our product includes the following features:</p>

    <section aria-labelledby="feature-1">
      <h3 id="feature-1">Fast Performance</h3>
      <p>Optimized for speed with minimal overhead.</p>
    </section>

    <section aria-labelledby="feature-2">
      <h3 id="feature-2">Secure by Default</h3>
      <p>Built-in security best practices.</p>
    </section>
  </section>

  <section aria-labelledby="pricing-heading">
    <h2 id="pricing-heading">Pricing Plans</h2>
    <div class="plans">
      <article>
        <h3>Free</h3>
        <p>$0/month</p>
        <ul><li>Basic features</li><li>1 user</li></ul>
      </article>
      <article>
        <h3>Pro</h3>
        <p>$29/month</p>
        <ul><li>All features</li><li>10 users</li></ul>
      </article>
    </div>
  </section>
</main>

<aside aria-label="Sidebar">
  <section>
    <h2>Newsletter</h2>
    <form>
      <input type="email" placeholder="Your email" aria-label="Email">
      <button type="submit">Subscribe</button>
    </form>
  </section>

  <section>
    <h2>Popular Posts</h2>
    <ol>
      <li><a href="/post1">Getting Started</a></li>
      <li><a href="/post2">Advanced Tips</a></li>
    </ol>
  </section>
</aside>

Related Examples