The main Element
The <main> element represents the primary, dominant content of the page — the content that is unique to this specific page, excluding content that repeats across pages like site header, sidebar navigation, and footer.
- There should be only one visible
<main>per page. - It is a landmark region — screen readers jump directly to it via keyboard shortcut.
- It is the target of "Skip to content" links, improving keyboard navigation.
- Do not nest
<main>inside<header>,<footer>,<nav>,<article>, or<aside>.
<!-- Skip link targets main -->
<a href="#main-content" class="skip-link">Skip to content</a>
<header>…site header, nav…</header>
<main id="main-content">
<!-- All unique page content goes here -->
<h1>HTML Form Basics</h1>
<p>HTML forms are the primary way…</p>
</main>
<footer>…site footer…</footer>The article Element
The <article> element represents a self-contained piece of content that could be independently distributed or syndicated — taken out of context and still make complete sense. Ask yourself: "Could this be published as a standalone item in an RSS feed, a social media card, or a different website?" If yes, it is an <article>.
Typical uses:
- A blog post or news article
- A product listing card (the card for a single product in a grid)
- A user comment (a complete, standalone contribution)
- A tutorial page (like this page)
- A social media post embed
- A widget or interactive component distributed on its own
<!-- A blog post listing: each post is an article -->
<main>
<h1>Latest tutorials</h1>
<article>
<header>
<h2><a href="/html/forms/form-basics.html">HTML Form Basics</a></h2>
<time datetime="2026-03-10">10 March 2026</time>
</header>
<p>Learn how the form element, action, method, and input controls work…</p>
<a href="/html/forms/form-basics.html">Read more</a>
</article>
<article>
<header>
<h2><a href="/html/forms/input-types.html">HTML Input Types</a></h2>
<time datetime="2026-03-12">12 March 2026</time>
</header>
<p>Every HTML input type explained with code examples…</p>
<a href="/html/forms/input-types.html">Read more</a>
</article>
</main>Nested articles
Articles can be nested. A comment thread is a good example: the original post is an <article>, and each reply is also a self-contained <article> nested inside the parent's comment section.
<article class="blog-post">
<header>
<h1>What is Semantic HTML?</h1>
<time datetime="2026-04-01">1 April 2026</time>
</header>
<p>Semantic HTML means using elements that describe their meaning…</p>
<section class="comments">
<h2>Comments</h2>
<!-- Each comment is a self-contained article -->
<article class="comment">
<header>
<strong>Alice</strong>
<time datetime="2026-04-02T09:30">2 April 2026</time>
</header>
<p>Great explanation! Really helped me understand article vs section.</p>
</article>
<article class="comment">
<header>
<strong>Bob</strong>
<time datetime="2026-04-02T11:15">2 April 2026</time>
</header>
<p>I always used divs for everything. Not any more!</p>
</article>
</section>
</article>The section Element
The <section> element represents a thematic grouping of content that belongs together and typically has a heading. It is a named chapter within a larger document — unlike <article>, the content of a <section> does not make complete sense on its own outside of its parent document.
Typical uses:
- Chapters within an article (Introduction, Features, Conclusion)
- Themed areas on a landing page (Hero, Features, Pricing, Testimonials)
- Named parts of a long-form document
- Tab panels (the content of each tab)
<!-- Section as chapter within an article -->
<article class="tutorial">
<h1>HTML Form Basics</h1>
<section>
<h2>The form element</h2>
<p>The form element wraps all your controls…</p>
</section>
<section>
<h2>GET vs POST</h2>
<p>Choosing the right method matters…</p>
</section>
<section>
<h2>The name attribute</h2>
<p>The name attribute keys the submitted data…</p>
</section>
</article>
<!-- Sections on a homepage -->
<main>
<section class="hero">
<h1>Learn to Code for Free</h1>
<p>Structured tutorials for beginners.</p>
</section>
<section class="features">
<h2>Why ylearner?</h2>
<!-- feature cards -->
</section>
<section class="courses">
<h2>Our Courses</h2>
<!-- course cards -->
</section>
</main><section> — use a <div> instead. The heading is what gives the section its identity in the document outline.
Comparison: main vs article vs section vs div
| Element | Meaning | How many per page? | Needs a heading? | Standalone without context? |
|---|---|---|---|---|
<main> | Primary page content, unique to this page | One (visible) | No (page has <h1> nearby) | Yes — it IS the page |
<article> | Self-contained, distributable content | Many | Recommended | Yes — makes sense independently |
<section> | Thematic grouping within a larger whole | Many | Yes — required | No — part of a larger document |
<div> | Generic layout container — no semantic meaning | Many | No | N/A — no meaning |
When to Use article vs section
The key question is: can this content stand alone?
- Use article when the content is self-contained and would make sense if copied to a different website, RSS feed, or social media card. A blog post, a product card, a comment, a recipe.
- Use section when the content is a named chapter or thematic block within a larger document and would lose context if removed from that document. The "Features" section of a homepage, a "Summary" chapter of a tutorial.
<!-- Real-world blog listing page: articles within a section -->
<main>
<section>
<h2>HTML Tutorials</h2>
<article> <!-- standalone post card -->
<h3><a href="/html/forms/form-basics.html">HTML Form Basics</a></h3>
<p>Everything you need to know about building HTML forms.</p>
</article>
<article> <!-- another standalone card -->
<h3><a href="/html/semantic/what-is-semantic.html">What is Semantic HTML?</a></h3>
<p>Using elements that describe their meaning.</p>
</article>
</section>
<section>
<h2>Python Tutorials</h2>
<!-- more articles -->
</section>
</main>📋 Summary
<main>— one per page; wraps all unique page content; target for skip links; screen reader landmark.<article>— self-contained, distributable content (blog post, product card, comment, tutorial). Would make sense on its own.<section>— thematic grouping within a document. Always needs a heading. Depends on surrounding context for full meaning.<div>— no semantic meaning. Use for layout containers when no semantic element fits.- Decision guide: Could this be published standalone? →
<article>. Is it a named chapter of a larger document? →<section>. Is it the entire unique page content? →<main>. Is it just a layout wrapper? →<div>.
Frequently Asked Questions
What if my content could be either article or section?
Apply the "standalone test": imagine copying just that block of content to a completely different website or an RSS feed. If it still makes sense with no surrounding context, it is an <article>. If it would need context from the rest of the page to be understood, it is a <section>. When genuinely uncertain, <section> is the safer choice — it is more commonly appropriate for page subsections, and most developers overuse <article>.
Can I use section inside article and article inside section?
Yes, both nesting patterns are valid. <article> inside <section> is common on listing pages (a section of articles grouped by category). <section> inside <article> is common for articles with named chapters. You can even nest articles inside articles (like comments inside a blog post).
Does main have any default CSS styling?
No meaningful visual styling — it is a block-level element like <div>. Its power is purely semantic and accessibility-related. You apply all layout styles (width, padding, flex/grid) with CSS, exactly as you would for a <div class="main-content">.
Is it bad to have a section without a heading?
The HTML specification recommends that every <section> has a heading. Without one, the section has no title for screen readers to use when listing page landmarks, and the document outline is incomplete. If you have a visually heading-less section, you can use a visually hidden heading (positioned off-screen with CSS) to provide the accessible name without affecting visual design. If you really don't want a heading at all, use a <div> instead.