HTML5 Layout Landmarks: Header, Nav, Main, Article, Aside, and Footer
To build modern layouts that search engines love, you must divide your web page into distinct regions. HTML5 introduced layout landmarks to serve this exact purpose. Let's study how and when to use each tag.
1. The Key Semantic Layout Elements
Here is a visual breakdown of a typical layout structure:
+---------------------------------------------------------+
| <header> |
| +-------------------------------------------------+ |
| | <nav> | |
| +-------------------------------------------------+ |
+---------------------------------------------------------+
| | |
| | <main> |
| <aside> | +--------------------------------------+ |
| | | <article> | |
| | +--------------------------------------+ |
| | | <section> | |
| | +--------------------------------------+ |
+------------+--------------------------------------------+
| <footer> |
+---------------------------------------------------------+A. <header>
Represents a container for introductory content, page logo, search bar, or author metadata. A single page can contain multiple <header> elements (e.g., inside an <article>).
<header>
<img src="/logo.png" alt="Company Logo">
<h1>Official Blog</h1>
</header>B. <nav>
Defines a set of navigation links. Use <nav> only for major blocks of navigation links (like main site navigation, menus, or table of contents).
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>C. <main>
Specifies the dominant content of the document. The content inside the <main> element must be unique to the document. It must not contain content that is repeated across pages, such as sidebars, headers, footers, or search widgets.
- Important constraint: There must not be more than one
<main>element in a single HTML document.
D. <article>
Represents a self-contained, independent composition. It should make sense on its own and be distributable independently from the rest of the site (e.g., forum posts, blog posts, news stories).
<article>
<h2>How to Learn HTML</h2>
<p>HTML is the backbone of the web...</p>
</article>E. <aside>
Defines content aside from the content it is placed in. The aside content should be indirectly related to the surrounding content (e.g., sidebars, ad spots, author info, glossary lists).
<aside>
<h4>Sponsored Link</h4>
<p>Check out our partner courses here!</p>
</aside>F. <footer>
Defines a footer for a document or section. It typically contains copyright information, contact info, sitemap links, and social links.
<footer>
<p>© 2026 GoIshine Tutorial Platform. All rights reserved.</p>
</footer>2. A Real-World Layout Template
Combining these tags, we get a clean, standard page layout structure:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Semantic Page</title>
</head>
<body>
<header>
<h1>Site Title</h1>
<nav>
<a href="/">Home</a> | <a href="/blog">Blog</a>
</nav>
</header>
<div class="layout-grid">
<main>
<article>
<h2>My First Semantic Post</h2>
<p>This is the main article content...</p>
</article>
</main>
<aside>
<h3>Recommended Reading</h3>
<ul>
<li><a href="/css">Learn CSS</a></li>
</ul>
</aside>
</div>
<footer>
<p>Contact us at info@example.com</p>
</footer>
</body>
</html>