HTML Layout Elements
HTML layout elements are structural building blocks that divide a web page into logical sections — header, navigation, main content, sidebar, and footer. Using these elements correctly makes your pages easier to read for both humans and search engines.
A Typical Web Page Layout
Most websites share a similar structure. They have a top section with the logo and navigation, a main content area in the middle, and a footer at the bottom. Some pages also have a sidebar alongside the main content.
Visual Diagram — Common Page Layout
+--------------------------------------------------+ | <header> | | Logo | Navigation Menu | +--------------------------------------------------+ | <nav> | | Home | About | Products | Blog | Contact | +--------------------------------------------------+ | <main> | <aside> | | | | | <article> | Related Links | | Main content here | Advertisements | | </article> | Sidebar info | | | | +-------------------------------+------------------+ | <footer> | | © 2026 eStudy247 | Privacy | Terms | +--------------------------------------------------+
The header Element
The <header> element contains introductory content for a page or a section. A page header typically holds the site logo, the site title, and the main navigation. A section header holds the section's heading and summary.
<header> <h1>eStudy247</h1> <p>Free tutorials for everyone</p> </header>
A page can have more than one <header> — one for the page and one inside each <article> or <section>.
The nav Element
The <nav> element groups navigation links. It marks the section of the page dedicated to moving between pages or sections.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
Not every group of links needs a <nav> tag. Use it only for major navigation blocks like the main menu and the breadcrumb trail. Footer links that are secondary do not need to be inside <nav>.
The main Element
The <main> element wraps the primary content of the page. A page must have only one <main> element. It excludes repeated content like navigation menus, headers, and footers.
<main> <h2>HTML Tutorial</h2> <p>Learn HTML from beginner to advanced.</p> </main>
Screen readers use the <main> element to let keyboard users jump directly to the page content, skipping repeated navigation links.
The article Element
The <article> element wraps content that makes sense on its own — content that you could copy to another website and it would still make sense. Blog posts, news articles, forum posts, and product listings all qualify.
<article> <h2>HTML Introduction</h2> <p>HTML stands for HyperText Markup Language. It is the standard language for creating web pages.</p> </article>
Visual Diagram — article as a Self-Contained Unit
Think of a newspaper page: +----------------------------------------+ | SPORTS | WEATHER | TECHNOLOGY | +----------------------------------------+ | [Article 1] | [Article 2] | | | | | Match recap | New phone launched | | India wins! | Price and specs inside | | | | | Makes sense | Makes sense | | on its own | on its own | +----------------------------------------+ Each box = one <article> element
The section Element
The <section> element groups related content together under a common theme. Unlike <article>, a section does not need to make sense on its own — it is a chapter inside a larger document.
<section> <h2>HTML Tags</h2> <p>Tags are the building blocks of HTML pages.</p> </section> <section> <h2>HTML Attributes</h2> <p>Attributes add extra information to HTML tags.</p> </section>
article vs section — Key Difference
article → remove it from the page; it still makes sense elsewhere section → remove it from the page; it loses context A blog post = <article> A chapter in the blog post = <section> inside <article>
The aside Element
The <aside> element contains content that is related to the main content but not part of its core flow. Sidebars, pull quotes, related article lists, and advertisement slots are common uses.
<aside>
<h3>Related Topics</h3>
<ul>
<li><a href="css.html">CSS Tutorial</a></li>
<li><a href="javascript.html">JavaScript Tutorial</a></li>
</ul>
</aside>
The footer Element
The <footer> element marks the bottom section of a page or a section. A page footer typically contains copyright information, legal links, contact details, and secondary navigation.
<footer>
<p>© 2026 eStudy247. All rights reserved.</p>
<nav>
<a href="privacy.html">Privacy Policy</a>
<a href="terms.html">Terms of Service</a>
</nav>
</footer>
Like <header>, a page can have multiple <footer> elements — one for the page and one inside each article or section.
The figure and figcaption Elements
The <figure> element wraps self-contained content — usually an image, diagram, code example, or chart. The <figcaption> element inside it provides a caption for the figure.
<figure> <img src="html-structure.png" alt="Diagram of HTML document structure"> <figcaption>Figure 1: The basic structure of an HTML document.</figcaption> </figure>
The details and summary Elements
The <details> element creates a collapsible section. The <summary> element inside it acts as the always-visible clickable title. Users click the summary to expand or collapse the full content.
<details> <summary>What is HTML?</summary> <p>HTML stands for HyperText Markup Language. It is the standard language used to create web pages. Browsers read HTML files and turn them into visible web pages.</p> </details>
Visual Diagram — details Element
Collapsed state: ▶ What is HTML? Expanded (after click): ▼ What is HTML? HTML stands for HyperText Markup Language...
Complete Page Layout Example
<header>
<h1>eStudy247</h1>
<nav>
<a href="/">Home</a>
<a href="/courses">Courses</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Learn HTML Today</h2>
<section>
<h3>What You Will Learn</h3>
<p>Tags, elements, attributes, forms, and more.</p>
</section>
</article>
<aside>
<h3>Also Explore</h3>
<a href="/css">CSS Tutorial</a>
</aside>
</main>
<footer>
<p>© 2026 eStudy247</p>
</footer>
Layout Elements vs div
A <div> can technically replace all these elements. A div wrapped around your navigation works visually. The difference is meaning. Layout elements communicate purpose to browsers, search engines, screen readers, and other developers reading your code. A <nav> tells every reader "this is navigation." A <div> tells them nothing about what it contains.
Use layout elements for their semantic purpose. Use <div> when no semantic element fits your need.