Headings Hierarchy

main
  h1 Welcome to Our Store

  section
    h2 Featured Products
    article
      h3 Wireless Headphones
      p Premium audio experience.

  section
    h2 About Us
    // content

<main>
  <h1>Welcome to Our Store</h1>
  
  <section>
    <h2>Featured Products</h2>
    {products.map((product) => (
      <article key={product.id}>
        <h3>{product.name}</h3>
        <p>{product.description}</p>
      </article>
    ))}
  </section>
  
  <section>
    <h2>About Us</h2>
    {/* content */}
  </section>
</main>

<main>
  <h1>Welcome to Our Store</h1>
  
  <section>
    <h2>Featured Products</h2>
    <article v-for="product in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <p>{{ product.description }}</p>
    </article>
  </section>
  
  <section>
    <h2>About Us</h2>
    <!-- content -->
  </section>
</main>

<main class="max-w-4xl mx-auto px-6 py-12">
  <h1 class="text-4xl font-bold text-slate-900 mb-8">
    Welcome to Our Store
  </h1>
  
  <section class="mb-12">
    <h2 class="text-2xl font-semibold text-slate-800 mb-6">
      Featured Products
    </h2>
    <article class="bg-white rounded-xl p-6 shadow-sm">
      <h3 class="text-xl font-medium text-slate-700 mb-2">
        Wireless Headphones
      </h3>
      <p class="text-slate-600">Premium audio experience.</p>
    </article>
  </section>
  
  <section>
    <h2 class="text-2xl font-semibold text-slate-800 mb-6">
      About Us
    </h2>
  </section>
</main>