Article, Aside, Footer
Overview
To build a modern web page, we use specific semantic tags to divide the page into logical zones. `<article>`, `<aside>`, and `<footer>` are three of the most important zones.
Using these tags ensures that if a user prints your webpage, or reads it in 'Reader Mode' on their iPhone, the browser knows exactly what content to keep (the article) and what to throw away (the aside/sidebar).
Syntax
Use `<article>` for independent, self-contained content. A good rule of thumb: If you copy-pasted the contents of the `<article>` tag and put it on a completely different website, would it still make complete sense? If yes, it's an article. Examples: a blog post, a news story, a YouTube video player, or a single Reddit post.
<main>
<article>
<h1>How to bake a cake</h1>
<p>First, preheat the oven...</p>
<!-- Articles can have their own footers! -->
<footer>Written by Chef Gordon</footer>
</article>
</main>Use `<aside>` for content that is tangentially related to the main article, but isn't part of the core story. Usually, this is a 'Sidebar'. Examples: Author bios, related links, advertisements, or a table of contents.
<article>
<p>The mitochondria is the powerhouse of the cell.</p>
<!-- Related info, but not part of the main text -->
<aside>
<h3>Fun Fact</h3>
<p>Mitochondria have their own DNA!</p>
</aside>
</article>The `<footer>` contains information about its containing section. Usually, it's at the very bottom of the page containing copyright info, privacy policy links, and social media icons. But an `<article>` can also have its own footer!
<!-- Page Footer -->
<footer>
<p>© 2025 Tech Blog. All rights reserved.</p>
<nav>
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>
</footer>Common Pitfalls
- Do not confuse <aside> with a simple CSS column. <aside> means the CONTENT is a side-note. If you just want to put a main picture on the left side of the screen using Flexbox, that is NOT an aside.
Real-World Example
A complete blog layout utilizing all three zones:
<body>
<header>...</header>
<div class="layout-container">
<main>
<article>
<h1>HTML Semantics</h1>
<p>Semantics is about meaning.</p>
<footer>Published: Jan 1st, 2025</footer>
</article>
</main>
<aside class="sidebar">
<h2>About the Author</h2>
<p>Kartik is a web developer.</p>
<h2>Ads</h2>
<div class="ad-banner">Buy my live class!</div>
</aside>
</div>
<footer>
<p>Copyright 2025</p>
</footer>
</body>