Learn HTML and CSS: Semantic blocks
Blocks with meaning
Hilary's nephew says Google "doesn't get" the site. To a browser it's one big heap of text: where's the menu, where's the address? Time to divide the page into blocks that say what they are.
The parts of a page
Almost every site has the same parts, and HTML has an element for each. <header> is the top of the page, with the logo and the name. <nav> holds the menu: the links to the other pages. <main> is the main content, which appears only once. <footer> is the bottom, with the address and contact details.
Elements like these are called semantic: their name says what's in them. On their own they look no different from an ordinary box. Here the shelter's CSS colours the header and the footer.
You notice the difference when you're not looking: a screen reader jumps straight to the menu or the main content, and Google knows what's content and what's just the edges.
<!DOCTYPE html><html lang="en"> <head> <title>The Cosy Basket animal shelter</title> <link rel="stylesheet" href="basis.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img src="mandje.svg" alt="" width="48" height="48"> <h1>The Cosy Basket</h1> <p class="slogan">Animal shelter in Rochdale</p> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="dogs.html">Dogs</a></li> <li><a href="cats.html">Cats</a></li> <li><a href="adopt.html">Adopt</a></li> </ul> </nav> </header> <main> <section id="animals"> <h2>Looking for a home</h2> <article class="card"> <img src="hond.svg" alt="Rex, a brown Labrador" width="64" height="64"> <h3>Rex</h3> <p>Calm <span class="breed">Labrador</span>, 8 years old.</p> </article> <article class="card"> <img src="kat.svg" alt="Misty, a grey cat" width="64" height="64"> <h3>Misty</h3> <p>Playful <span class="breed">British shorthair</span>, 2 years old.</p> </article> </section> <section id="opening-hours"> <h2>Opening hours</h2> <table> <tr> <th>Day</th> <th>Hours</th> </tr> <tr> <td>Wednesday</td> <td>1 pm to 5 pm</td> </tr> <tr> <td>Saturday</td> <td>10 am to 4 pm</td> </tr> </table> <p>On Sundays we're <span class="closed">closed</span>.</p> </section> <section id="adopt"> <h2>How to adopt</h2> <ol> <li>Fill in the adoption form.</li> <li>Come and meet your animal.</li> <li>Take your new housemate home.</li> </ol> </section> </main> <footer> <p>3 Wicker Lane, Rochdale</p> </footer> </body></html>Section and article
Inside <main> you divide the content further. A <section> is a chapter of the page, with its own heading: the animals, the opening hours, how to adopt.
An <article> is a piece that stands on its own. You could share it separately, like a news item or the card of one animal.
A section often holds articles: the chapter Looking for a home has a card for each animal.
<main> <section> <h2>Looking for a home</h2> <article class="card"> <h3>Rex</h3> <p>Calm Labrador, 8 years old.</p> </article> <article class="card"> <h3>Misty</h3> <p>Playful cat, 2 years old.</p> </article> </section></main>Try it yourself
Divide the page into blocks: the name in a <header>, the heading and the paragraph about the animals in <main>, and the address in a <footer>.
<h1>The Cosy Basket</h1><h2>Looking for a home</h2><p>Rex, Bella and Misty are waiting for a cosy basket.</p><p>3 Wicker Lane, Rochdale</p>body { margin: 0; font-family: system-ui, sans-serif; background: #fffaf3; color: #3d2b1f;}header { padding: 20px 16px 14px; background: #f6c88f;}header h1 { margin: 4px 0 0;}.slogan { margin: 4px 0 10px;}nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none;}nav a { color: #7a3e12; font-weight: bold;}main { padding: 8px 16px 24px;}table { border-collapse: collapse;}th,td { padding: 6px 12px; border: 1px solid #e3c9a8; text-align: left;}th { background: #fbe3c4;}.card { margin: 12px 0; padding: 12px 16px; border-radius: 16px; background: #ffffff;}.card h3 { margin: 4px 0;}.box { padding: 4px 16px; border-radius: 16px; background: #fde9d4;}.breed { color: #b5541c;}.closed { color: #b42318; font-weight: bold;}footer { padding: 12px 16px; background: #f6c88f;}Ready for more?
The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.
Start the lesson