HTML says what is on a page
HTML (HyperText Markup Language) is the language that says what is on a web page: its headings, paragraphs, lists, links and forms. A page built from the right elements is easier to read, easier for a search engine to understand and usable with a screen reader.
In this lesson you will choose the right element for each part of a page.
By the end of this lesson
Note
I can structure a page with meaningful HTML.
Key words
| Word | What it means | Example |
|---|---|---|
| HTML | the language that says what is on a page | |
| Element | one part of a page, written with tags | <p>Hello</p> |
| Attribute | extra detail inside a start tag | href="menu.html" |
| Heading | a title for a part of the page, from h1 to h6 | |
| Landmark | an element that names a big area of the page | nav |
| Form | a part of a page where a user types or chooses |
The cells students fill in are left blank in this preview.
An element has two tags and content
Most elements have three parts. The start tag opens it, such as <p>. The content is what sits inside. The end tag closes it, such as </p>.
An attribute adds detail to the start tag. In <a href="menu.html"> the attribute href says where the link goes. Elements can sit inside other elements, which gives the page a tree shape.
Try it: change the opening hours
<h1>Library opening hours</h1>
<p>Open <strong>every day</strong>. See the <a href="#map">map</a>.</p>
<ul>
<li>Monday to Friday: 9 to 6</li>
<li>Weekend: 10 to 4</li>
</ul>
<!-- Change a time, then run the page again. -->Headings give a page an outline
A page has one h1, which names the whole page. Under it come h2 headings for the main parts. An h3 sits under an h2, and so on down to h6.
The numbers are a ranking, not a size. A screen reader lets a user jump from heading to heading, so the headings must tell the true story of the page.
List the files of the lab page
docker exec jupyter ls siteShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
Print the headings of the lab page
docker exec jupyter python3 steps/outline.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The printed outline is the page in miniature
The first Run lists three files: app.js, index.html and style.css. The page's structure is in index.html.
The second Run reads only the headings. It prints one h1, Lunch menu, and under it three h2 headings with the words Today's dishes, Find a dish and Theme. Read alone, they already tell you what the page offers.
A common mistake
Warning
Many people think a heading is just big bold text. It is not. A heading says what a part of the page is about. Pick the level for its place in the outline, then make it look as you want with CSS.
Landmarks and lists say what each part is
Landmark elements name the big areas of a page, so a user and a search engine can find them. A list belongs in a list element, not in lines of text with dashes.
Choose an element for its meaning. A div has no meaning at all, so use it only when nothing else fits.
Worked example: which element for which job
| Part of the page | Element | Why this one |
|---|---|---|
| Top banner with the site name | header | It names the top area |
| Group of links to other pages | nav | Users can jump straight to it |
| The main content, once per page | main | It is the part to skip to |
| A themed block with its own heading | section | It groups related content |
| Items in no special order | ul and li | The list is part of the structure |
| Bottom notes and links | footer | It names the end area |
The cells students fill in are left blank in this preview.
Count every tag on the lab page
docker exec jupyter python3 steps/tags.pyShown here, not run. Create a free account to press Run and type it into your own lab’s terminal.
The tag counts show the structure
The last line of the output says 36 tags in all. The counts show header, nav, main and footer once each, section three times and li five times.
That is a page with its landmarks in place. Its five links, a, are in a nav and a footer, and its three sections each carry an h2.