Page Structure and Layout

All in one: a whole page skeleton, right and wrong side by side

What this example compares

The tree: <html> vs <head> vs <body> vs <header>
Where each region sits: right (header > nav, main > section > article, aside in main) vs wrong (main > header > nav, article in a header)
Wireframe to skeleton: each box becomes header, nav, main, section, article, aside or footer, vs <div> for a box that exists only for CSS
Structure first, style later: no CSS vs CSS columns vs the wrong source order hidden by CSS
Headings, headers and footers inside regions: the page header and footer vs an article's own, with <time datetime> and the h1-h2-h3-h4 ladder
Tables: a <table> for layout vs regions + CSS vs a table for data
Space between blocks: <br><br><br> vs a CSS margin vs <br> inside an address
Looks like vs is: <div class="h3"> vs <h3>, and <div class="nav"> vs <nav>
Fixed vs fluid: width="800" vs a fixed height vs no size vs a picture that scales
Three page shapes: single column vs content + sidebar vs form page
The checklist: <aside> vs <section>, with the eight-point skeleton checklist of 14.6

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see an orange header box holding the title (with its grey h1 tag) and an eleven-link menu in its own orange nav box, then one big green main box. Inside main come ten grey section boxes, each starting with an h2 tag, and at the end a blue aside with the numbered checklist; an orange footer with the copyright line and the address closes the page. Panel 4 shows News above Links in card 1 and two columns in cards 2 and 3 that look identical. Panel 5 shows an article with its own header, two inner sections and its own footer. In panel 6 the layout table and the regions look alike, in panel 7 both gaps look alike, and in panel 8 the styled div and the real h3 look alike except for the grey tag. In panel 9 the 800-pixel table is cut off, the fixed-height box spills its words, and the picture shrinks to fit. Nothing is printed in the Console: this chapter is HTML only.

Quick check: in panel 4, cards 2 and 3 look exactly the same. Which one is wrong, and who will notice?

Card 3. Its aside is written before the section, and CSS only pulls it to the right. A screen reader, a search engine and a phone with no CSS all read the source order, so they meet “Links” before “News”. If the order only makes sense once the CSS loads, the order is wrong.