The <aside> and <footer> tags in HTML are semantic elements used for supporting content and closing content. They are not only layout boxes. The <aside> tag represents content that is related to the main content but not part of its primary flow. The <footer> tag represents closing information for a page, section, article, or other content area.
These two tags are common in blogs, tutorials, documentation pages, news websites, dashboards, and ecommerce pages. A sidebar with related tutorials can be an aside. Author details at the end of a blog post can be a footer. Site copyright links at the bottom of a page can also be a footer. The meaning depends on the context where the element is used.
What is Aside Tag in HTML
The <aside> tag represents content that is indirectly related to the surrounding content. It may support the main content, but the main content should still make sense if the aside is removed. Common examples include sidebars, related links, author notes, advertisements, pull quotes, glossary boxes, warnings, and extra explanations.
<main>
<article>
<h1>Functions in C</h1>
<p>A function is a reusable block of code.</p>
</article>
<aside>
<h2>Related Tutorials</h2>
<ul>
<li><a href="/c-programming/pointers-in-c/">Pointers in C</a></li>
<li><a href="/c-programming/arrays-in-c/">Arrays in C</a></li>
</ul>
</aside>
</main>In this example, the aside contains related tutorials. The main article does not depend on the aside, but the aside still adds value. This is exactly the kind of supporting content that <aside> is designed for.
What is Footer Tag in HTML
The <footer> tag represents footer information for its nearest sectioning content or for the whole page. A page footer may contain copyright text, contact links, privacy links, social links, and secondary navigation. An article footer may contain author information, tags, share links, or update dates.
<article>
<h1>Structures in C</h1>
<p>A structure groups related variables under one name.</p>
<footer>
<p>Written by Nerds Do Stuff</p>
<p>Tags: C Programming, Structures</p>
</footer>
</article>This footer belongs to the article, not the entire website. A page can also have a separate footer at the bottom of the body. Multiple footers are valid when each footer closes the content area it belongs to.
Aside vs Footer in HTML
| Element | Meaning | Common content |
|---|---|---|
<aside> | Related supporting content that is not part of the main flow. | Sidebar, related links, callouts, ads, glossary notes. |
<footer> | Closing or metadata content for a page, article, or section. | Copyright, author info, tags, contact links, policy links. |
<main> | Primary unique content of the page. | Tutorial, article body, product details, search results. |
<section> | Thematic group of related content. | FAQ group, feature group, lesson chapter. |
Aside supports the content. Footer closes the content.
Aside Inside Article
An aside can appear inside an article when the supporting content relates specifically to that article. For example, a tutorial may include a note, warning, tip, or small reference box that supports the explanation but is not part of the main paragraph flow.
<article>
<h1>Memory Layout in C</h1>
<p>The stack stores local variables and function call information.</p>
<aside>
<h2>Quick Note</h2>
<p>Stack memory is automatically managed, but stack size is limited.</p>
</aside>
<p>The heap is used for dynamic memory allocation.</p>
</article>This aside is not a full page sidebar. It is a contextual note inside the article. That is valid because the content is related but secondary.
Aside as a Sidebar
The aside tag is often used for sidebars, but it does not mean “left column” or “right column.” A sidebar is a visual layout pattern. The semantic meaning is supporting content. CSS decides whether the aside appears on the left, right, below the article, or hidden behind a mobile accordion.
<main class="layout">
<article>
<h1>HTML Forms</h1>
<p>Forms collect user input.</p>
</article>
<aside class="sidebar">
<h2>HTML Topics</h2>
<nav aria-label="HTML topic list">
<a href="/html/input-types/">Input Types</a>
<a href="/html/label/">Label Tag</a>
</nav>
</aside>
</main>The class name handles design. The <aside> tag handles meaning. Keeping those two responsibilities separate is one of the main ideas behind semantic HTML.
Page Footer vs Article Footer
A page footer usually closes the entire document. It commonly appears near the bottom of the page and contains site-wide information. An article footer closes one article. It may appear before the page footer and contain article-specific metadata.
<body>
<main>
<article>
<h1>Nav Tag in HTML</h1>
<p>The nav tag defines major navigation links.</p>
<footer>
<p>Updated on May 31, 2026</p>
</footer>
</article>
</main>
<footer>
<p>Copyright 2026 Nerds Do Stuff</p>
</footer>
</body>Both footers are valid because they close different contexts. The first footer belongs to the article. The second footer belongs to the page. This is more meaningful than using generic containers for both.
Accessibility Notes
The <aside> element can be exposed as a complementary landmark when it is used in the right context. This helps assistive technology users recognize supporting content. The <footer> element may be exposed as content information when it belongs to the page level. These landmarks are useful only when the page is not overloaded with poorly named regions.
Headings are useful inside both aside and footer when the content needs a label. A sidebar with related posts should usually have a heading such as “Related Tutorials.” A footer navigation area may need a visible heading or accessible label if it contains several link groups.
When Not to Use Aside or Footer
Do not use <aside> for any content that is required to understand the main topic. If the information is essential, it probably belongs in the main article flow. Do not use <footer> only because an element visually appears at the bottom of a card. Ask whether it actually contains closing information, metadata, or related links for that card or section.
| Situation | Better choice |
|---|---|
| Essential explanation in a tutorial | Keep it in the main article flow. |
| Related tutorials beside the article | <aside> |
| Author and tags below a post | <footer> inside article |
| Site copyright and policy links | Page-level <footer> |
| Wrapper used only for spacing | <div> |
| Main navigation links | <nav> |
Footer Navigation and Legal Links
A page footer often contains secondary navigation. This may include About, Contact, Privacy Policy, Terms, Sitemap, and social profile links. If the footer contains a large navigation group, using <nav> inside <footer> can be appropriate. The footer defines the closing region, while nav identifies the link group inside it.
<footer>
<p>Copyright 2026 Nerds Do Stuff</p>
<nav aria-label="Footer navigation">
<a href="/about/">About</a>
<a href="/contact/">Contact</a>
<a href="/privacy-policy/">Privacy Policy</a>
</nav>
</footer>This structure is clearer than placing all footer links inside a plain paragraph. It also gives assistive technology users a named navigation region when the footer links are important enough to navigate the site.
Aside for Callouts and Warnings
Aside is not limited to sidebars. A callout inside a tutorial can also be an aside when it provides extra context. For example, a warning about browser support, a quick performance note, or a related definition can be marked as aside if the main explanation still works without it. If the warning is essential to safely completing a task, keep it in the main content flow instead.
Context Decides the Meaning
The same element can have a different scope depending on where it appears. A footer inside an article belongs to that article. A footer directly inside the body usually belongs to the whole page. An aside inside an article supports that article. An aside beside the main content may support the whole page or the current layout. Always read the nearest parent context before deciding what the element means.
This context-based thinking prevents messy markup. Instead of asking, “Is this at the bottom?” or “Is this on the side?” ask, “What content area does this close or support?” That question gives a more accurate answer than visual position alone.
In responsive designs, this becomes even more important. An aside may appear on the right side on desktop, below the article on mobile, and inside an accordion on tablets. The layout changes, but the supporting meaning remains stable because the HTML is based on content purpose. That stability helps during redesigns and audits. A future CSS change should not force you to rethink the semantic role of the content or rewrite the markup again. This prevents layout confusion later too.
Common Mistakes
- Using
<aside>only because something is visually on the side. - Putting essential article content inside aside.
- Thinking only one footer is allowed on a page.
- Using footer as a generic bottom wrapper with no closing information.
- Forgetting headings or labels for large sidebar and footer link groups.
- Mixing site-wide footer content with article-specific footer content.
Can aside be inside main?
Yes. An aside can be inside main when it supports the main content. It can also be outside main when it supports the overall page.
Can footer be inside article?
Yes. A footer inside article closes that article and can contain author details, tags, dates, or related metadata.
Is aside always a sidebar?
No. Aside means supporting content. CSS decides whether it appears as a sidebar, callout, note box, or another layout.
Best Practices
- Use
<aside>for secondary related content. - Use
<footer>for closing information and metadata. - Keep essential explanations in the main content, not in aside.
- Use separate footers for page-level and article-level information when needed.
- Add clear headings or labels for large aside and footer regions.
Continue learning HTML in order
Follow the topic sequence with the previous and next lesson.