Page Layout Techniques
How the classic website shape — header, sidebar, content, footer — is structured in HTML.
What you will learn
- Recognise the standard website layout
- Structure a page ready for CSS layout
- Understand that CSS does the visual arrangement
The classic layout
Most websites share the same shape: a header on top, a nav menu, a main content area (sometimes with an aside sidebar), and a footer at the bottom. You build that shape with semantic tags; CSS arranges it visually.
<header style="background:#4338ca;color:#fff;padding:14px;text-align:center">Header</header>
<nav style="background:#e0e7ff;padding:10px;text-align:center">Home · About · Contact</nav>
<main style="padding:16px">
<article>
<h2>Main content</h2>
<p>The unique content of this page goes here.</p>
</article>
</main>
<footer style="background:#1f2333;color:#fff;padding:12px;text-align:center">Footer</footer>Four semantic blocks stack in order: <header> on top, then <nav>, then <main> with the page content, then <footer> at the bottom. The inline style here just adds colours so you can see each band clearly — the shape comes from the tags and their order.
Note: Putting two columns side by side (content + sidebar) is done with CSS — using Flexbox or Grid, which you will learn in the CSS module. HTML provides the structure; CSS provides the arrangement.
Tip: Build the structure first with clean semantic tags. A well-structured page is dramatically easier to lay out once you add CSS.
Q. What actually places a sidebar beside the main content?
✍️ Practice
- Build the header / nav / main / footer skeleton for a fictional business using semantic tags.
🏠 Homework
- Find three websites and sketch their layout boxes (header, nav, main, aside, footer).