HTML & CSS · 14-day planAll days
Structure whole pages with semantic elements like header, nav, main, article, aside and footer, know when a plain div or span is right, and build accessible data tables with headers, captions and merged cells.
By the end of today you can
- Lay out a page with header, nav, main, section, article, aside and footer
- Choose between semantic elements and generic div and span
- Use the class and id attributes to label elements
- Build a data table with caption, thead, tbody, th and td
- Merge cells with colspan and rowspan
So far your pages have been a list of headings and paragraphs. Real pages have a header, navigation, the main content, maybe a sidebar, and a footer. HTML has an element for each.
A page's landmarks
It looks plain: these elements don't change appearance. What they add is meaning:
| Element | Holds |
|---|---|
<header> | Intro: logo, site name, maybe navigation |
<nav> | A block of main navigation links |
<main> | The page's unique content (one per page) |
<article> | Something complete on its own: a post, a product card, a comment |
<section> | A themed part of something, usually with its own heading |
<aside> | Related but secondary: sidebar, tips, ads |
<footer> | Closing info: contact, copyright, links |
Screen readers list these landmarks so users can jump straight to "main" or "navigation", and search engines know which part is the real content.
div and span: generic boxes
When nothing else fits, use a generic container:
<div>: a block box (starts on a new line, full width).<span>: an inline box (sits inside a line of text).
They mean nothing on their own. They're hooks for CSS, labelled with class or id:
class: a label many elements can share; an element can have several:class="card featured".id: a unique name, used once per page (and for#links).
Nothing changes yet; on Day 6 you'll style .card and .easy with CSS.
Prefer meaning first. Reach for <nav>, <article> or <button> before a <div>. "Div soup" (pages made of nothing but divs) works, but is harder for everyone to understand.
Tables
Tables are for data: rows and columns, like a spreadsheet:
| Element | Is |
|---|---|
<table> | The whole table |
<caption> | Its title |
<thead> / <tbody> | Header rows / body rows |
<tr> | A table row |
<th> | A heading cell |
<td> | A data cell |
(border="1" is an old-fashioned shortcut to see the cells. You'll style borders with CSS instead.)
Merging cells
colspan makes a cell span several columns; rowspan, several rows:
Don't use tables for page layout. That was common in the 1990s; today CSS Flexbox and Grid do layout (Days 10 and 11), and tables stay for data.
Recap
- Structure pages with
header,nav,main,article,section,aside,footer: landmarks people and machines understand. div(block) andspan(inline) are generic boxes; label them withclass(shared) orid(unique).- Tables for data:
caption,thead/tbody,tr,th,td; merge withcolspanandrowspan.
Tomorrow: forms, the way pages ask people for information.
Knowledge check
Test what you learned
5 questions · pick an answer to see if you're right
- 1
Why use <nav> instead of <div> for a menu of links?
- 2
How many <main> elements should a page have?
- 3
When is <div> the right choice?
- 4
What's the difference between class and id?
- 5
Should you use a <table> to lay out a page in columns?
Finished day 4?
Mark complete and continue to Day 5: FormsWas this lesson helpful?
Need a breather? Take a two-minute break