HTML Layout

Build page layouts with semantic elements.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

Most websites share the same building blocks. HTML has elements for each part:

<header>: the top of the page or a section.
<nav>: a set of navigation links.
<main>: the main content.
<section>: a thematic group of content.
<article>: independent, self-contained content.
<aside>: content beside the main content, like a sidebar.
<footer>: the bottom of the page or a section.

CSS Flexbox and Grid are used to place these blocks side by side.

Key Takeaways: HTML Layout

Mastering HTML Layout helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Layout Code Example

HTML

<style>
  body   { margin: 0; font-family: Arial; }
  header { background: #071A2F; color: white; padding: 14px; }
  nav    { background: #2563EB; padding: 8px 14px; }
  nav a  { color: white; margin-right: 12px; text-decoration: none; }
  .wrap  { display: flex; gap: 12px; padding: 12px; }
  main   { flex: 3; background: #F1F5F9; padding: 12px; }
  aside  { flex: 1; background: #CCFBF1; padding: 12px; }
  footer { background: #0B2441; color: #CBD5E1; text-align: center; padding: 10px; }
</style>

<header><h2>My Website</h2></header>
<nav><a href="#">Home</a><a href="#">Blog</a><a href="#">Contact</a></nav>
<div class="wrap">
  <main><article><h3>Article title</h3><p>Main content goes here.</p></article></main>
  <aside>Sidebar</aside>
</div>
<footer>© 2026 My Website</footer>

Free sign-in required · Google login available