The <main> element represents the primary content of the page, while <article> represents self-contained, reusable content. These elements help structure your content semantically and improve accessibility.
The Main Element
The <main> element contains the dominant content of your page—the content that's unique to that page. Every page should have only one <main> element.
Basic Main Usage
basic-main.html
<!DOCTYPE html>
<html lang="en">
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<!-- Main content of the page -->
<main>
<h2>Welcome to Our Site</h2>
<p>This is the primary content of the page.</p>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>Important Rules for Main
- Only one
<main>per page - Don't put
<main>inside<article>,<aside>,<header>,<footer>, or<nav> - Main should contain content unique to the page
- Don't include site-wide elements like navigation or logos
main-dont.html
<!-- Wrong: Navigation in main -->
<main>
<nav>Site navigation</nav>
<p>Content</p>
</main>
<!-- Wrong: Multiple main elements -->
<main>First section</main>
<main>Second section</main>
<!-- Correct: One main with sections -->
<header>
<nav>Site navigation</nav>
</header>
<main>
<section>
<h2>First Section</h2>
<p>Content...</p>
</section>
<section>
<h2>Second Section</h2>
<p>Content...</p>
</section>
</main>The Article Element
The <article> element represents self-contained content that could be independently distributed or reused. Think blog posts, news articles, forum posts, or product cards.
When to Use Article
Use article when the content:
- Makes sense on its own
- Could be syndicated (RSS feed, aggregator)
- Could be shared independently
- Has its own heading
Blog Post Example
blog-article.html
<main>
<article>
<h2>Introduction to JavaScript</h2>
<p>By John Doe on January 15, 2024</p>
<p>JavaScript is a programming language...</p>
<section>
<h3>Getting Started</h3>
<p>To begin with JavaScript...</p>
</section>
<section>
<h3>Basic Syntax</h3>
<p>JavaScript syntax is similar to...</p>
</section>
</article>
</main>Multiple Articles
You can have multiple articles on a page (like a blog listing):
multiple-articles.html
<main>
<h1>Recent Blog Posts</h1>
<article>
<h2>First Blog Post</h2>
<p>Published on January 15, 2024</p>
<p>Post content goes here...</p>
<a href="/post/1">Read more</a>
</article>
<article>
<h2>Second Blog Post</h2>
<p>Published on January 14, 2024</p>
<p>Post content goes here...</p>
<a href="/post/2">Read more</a>
</article>
<article>
<h2>Third Blog Post</h2>
<p>Published on January 13, 2024</p>
<p>Post content goes here...</p>
<a href="/post/3">Read more</a>
</article>
</main>Main vs Article
Understanding the difference:
main-vs-article.html
<!-- Main = Primary content area of entire page -->
<main>
<h1>Blog Post Title</h1>
<p>This is the main content...</p>
</main>
<!-- Article = Self-contained content -->
<main>
<article>
<h2>Blog Post 1</h2>
<p>Content...</p>
</article>
<article>
<h2>Blog Post 2</h2>
<p>Content...</p>
</article>
</main>
<!-- You can have article inside main -->
<main>
<h1>Latest News</h1>
<article>
<h2>News Story</h2>
<p>Story content...</p>
</article>
</main>Nested Articles
Articles can contain other articles (like comments on a blog post):
nested-articles.html
<main>
<article>
<h2>Main Blog Post</h2>
<p>Post content here...</p>
<section>
<h3>Comments</h3>
<article>
<h4>Comment by Jane</h4>
<p>Great article!</p>
</article>
<article>
<h4>Comment by Bob</h4>
<p>Thanks for sharing!</p>
</article>
</section>
</article>
</main>Practical Examples
News Website
news-site.html
<body>
<header>
<h1>News Daily</h1>
<nav>
<a href="/">Home</a>
<a href="/world">World</a>
<a href="/tech">Tech</a>
</nav>
</header>
<main>
<h2>Today's Top Stories</h2>
<article>
<h3>Breaking: New Technology Released</h3>
<p>Published: January 15, 2024</p>
<img src="tech.jpg" alt="New technology">
<p>A revolutionary new technology...</p>
</article>
<article>
<h3>Market Update: Stocks Rise</h3>
<p>Published: January 15, 2024</p>
<p>Stock markets showed gains...</p>
</article>
</main>
<aside>
<h3>Trending Topics</h3>
<ul>
<li>Technology</li>
<li>Finance</li>
</ul>
</aside>
<footer>
<p>© 2024 News Daily</p>
</footer>
</body>E-commerce Product Listing
product-listing.html
<main>
<h1>Featured Products</h1>
<article>
<h2>Wireless Headphones</h2>
<img src="headphones.jpg" alt="Wireless headphones">
<p>Price: $99.99</p>
<p>High-quality wireless headphones with noise cancellation.</p>
<button>Add to Cart</button>
</article>
<article>
<h2>Smart Watch</h2>
<img src="watch.jpg" alt="Smart watch">
<p>Price: $299.99</p>
<p>Track your fitness and stay connected.</p>
<button>Add to Cart</button>
</article>
</main>Best Practices
Use Proper Headings
proper-headings.html
<!-- Good: Clear heading hierarchy -->
<main>
<h1>Page Title</h1>
<article>
<h2>Article Title</h2>
<section>
<h3>Section Title</h3>
<p>Content...</p>
</section>
</article>
</main>Test Independence
Ask: "Could this article stand alone?" If yes, use <article>:
independence-test.html
<!-- Good: Independent content -->
<article>
<h2>Complete Recipe: Chocolate Cake</h2>
<p>Ingredients: flour, sugar, cocoa...</p>
<p>Instructions: Mix ingredients...</p>
</article>
<!-- Better as section: Depends on context -->
<section>
<h2>Ingredients</h2>
<p>Flour, sugar, cocoa...</p>
</section>Accessibility Benefits
- Screen readers announce
<main>as a landmark - Users can skip directly to main content
<article>provides structure for content navigation- Better semantic meaning helps all assistive technologies
Key Takeaways
- Use
<main>for the primary page content - Only one
<main>per page - Use
<article>for self-contained content - Articles should make sense independently
- You can have multiple articles on a page
- Articles can be nested (e.g., comments)
- Articles can exist inside main
- Both elements improve accessibility and SEO
What's Next?
Now that you understand main and article elements, the next lesson will cover <section> and <aside> elements for additional content organization.