HTML Layout
Most pages share a common layout that semantic elements make clear.
A typical page has a header at the top, a main content area, sometimes a sidebar, and a footer at the bottom. Using the right element for each region helps browsers and assistive tech understand the structure.
Layout Elements
- <header> for the top area, such as a logo and title.
- <nav> for the main navigation links.
- <main> for the primary content of the page.
- <aside> for related side content.
- <footer> for closing content like contact details.
A Page Layout
Layout regions
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Hyring</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Jobs</a>
<a href="#">About</a>
</nav>
<main>
<h2>Find your next role</h2>
<p>Browse open positions across top companies.</p>
</main>
<footer>
<p>Contact: hello@hyring.com</p>
</footer>
</body>
</html>Main With a Sidebar
article and aside
<!DOCTYPE html>
<html>
<body>
<main>
<article>
<h2>New Feature Launch</h2>
<p>We just released dark mode for the dashboard.</p>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Release notes</a></li>
<li><a href="#">Changelog</a></li>
</ul>
</aside>
</main>
</body>
</html>Note: These elements add little styling on their own. Their value is the structure and meaning they give the page.
Exercise: HTML Layout
Which CSS display value turns a container into a flexible box layout for arranging child elements?
