Topic 15 of 41
HTML Page Layout
Overview
Before we had CSS Grid and Flexbox, developers used terrible hacks (like HTML Tables or `float`) to create layouts. Today, HTML's job is NOT to create the layout, but to group elements logically so CSS can easily move them around.
A modern HTML layout relies on wrapping major sections of the page in semantic containers, which act as the 'grid areas' for CSS.
Syntax
The 'Holy Grail' is the most famous web layout. It consists of a Header at the top, a Footer at the bottom, and a Main Content area in the middle flanked by two sidebars.
Notice how clean the HTML is. There is zero styling here. We just provide the boxes.
The Holy Grail Layout
html
<div class="holy-grail-container">
<header class="header">
Top Navigation
</header>
<div class="middle-wrapper">
<nav class="left-sidebar">Menu Links</nav>
<main class="main-content">Primary Article</main>
<aside class="right-sidebar">Ads & Info</aside>
</div>
<footer class="footer">
Bottom Info
</footer>
</div>Common Pitfalls
- The biggest pitfall beginners make is trying to use HTML tags like <br> to create vertical space, or to create horizontal space for layouts. This is completely broken on mobile phones. Layout and spacing MUST be done in CSS using margins, padding, and Flexbox/Grid.
Real-World Example
How a clean HTML skeleton allows CSS Grid to instantly arrange the entire page:
example
html
<!-- The incredibly simple HTML -->
<body class="grid-layout">
<header>Header</header>
<nav>Sidebar Menu</nav>
<main>Main Content</main>
<footer>Footer</footer>
</body>
<!-- The magic happens in CSS -->
<style>
.grid-layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header { grid-area: header; }
nav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }
</style>