Aside & Footer

Not all content is created equal. Some of it is secondary — related but not essential. And every page needs a proper ending. The <aside> and <footer> tags handle these perfectly.

The Aside Tag

<aside> holds content that is tangentially related to the main content. Think sidebars, pull quotes, related links, or advertisements. If you removed it, the main content would still make sense on its own.


<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="/css-intro">CSS for Beginners</a></li>
    <li><a href="/js-intro">JavaScript Basics</a></li>
  </ul>
</aside>

Try it Yourself →

Inside Article vs Page Level

When <aside> is inside an <article>, it relates to that specific article. When it is at the page level, it relates to the whole site. Both are valid — just think about what the aside is connected to.

The Footer Tag

<footer> contains information about its parent section — authorship, copyright, contact links, or related documents. Like <header>, you can have multiple footers. The page footer usually has site-wide info, and an article footer might have the author and publish date.


<footer>
  <p>&copy; 2026 My Website. All rights reserved.</p>
  <nav>
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>

Full Page Layout

Put them all together and you get a beautifully semantic page structure that is easy to navigate and understand — both for humans and machines.


<body>
  <header>Site Header</header>
  <nav>Navigation</nav>
  <main>
    <article>Blog Post</article>
    <aside>Related Links</aside>
  </main>
  <footer>Copyright Info</footer>
</body>

← Main, Section & Article

Meta Tags →