Tags that mean something, and pages everyone can use
Why a div says nothing, how to name the parts of a page, how to name a button, and how to make everything work with only a keyboard.
By the end you can
- Replace empty boxes with tags that say what they are
- Lay out a page so a blind visitor can jump around it
- Give every button a name that is read out
- Make a page work with no mouse at all
Easier if you did first
step 1 of 5
Why a plain box is not enough
<div> means nothing. It is an empty box. You can put anything in it, and it tells nobody what is inside.
Imagine moving house. You pack everything into identical brown boxes and write nothing on them. You can still find things, slowly, by opening each one. Now imagine you cannot see. The unlabelled boxes are useless.
That is a page built from divs. People looking at the screen manage, because the design shows them where things are. A blind visitor, using software that reads the page out loud, gets nothing.
HTML has tags that write on the box for you. <header> is the top of the page. <nav> is the menu. <main> is the real content of this page. <footer> is the bottom.
These four are called landmarks. Screen readers can list them, so a visitor can jump straight to the content instead of sitting through the menu on every page of your site.
Two rules. There is only one <main> per page, and it holds what is unique to that page. The header, menu and footer stay outside it, because they are the same on every page.
The page on the right is all brown boxes. Label them.
the same page, labelled
<div class="header"> becomes <header>
<div class="nav"> becomes <nav>
<div class="content"> becomes <main>
<div class="footer"> becomes <footer>What these words mean
- div
- An empty box with no meaning. Use it only when no real tag fits.
- landmark
- A named region of a page: header, nav, main, footer, aside.
- header
- The top of the page: the name of the site, the logo, usually the menu.
- nav
- The menu: a block of links to other parts of the site.
- main
- The content this page is about. One per page.
- footer
- The bottom of the page: contact details, copyright, small print.
- class
- A name you give an element for styling later. Only CSS reads it.
Easy to get wrong
<div class="main">
<main>
A class name is only for you and your CSS. Nothing else reads it. The tag itself is what carries the meaning to browsers, screen readers and Google.
Two <main> tags on one page
One <main>, with sections inside it
Main answers the question 'where does the content start'. Two answers is no answer, and a visitor jumping to the content lands in the wrong place.
What we check
- The top of the page is a header
- The menu is a nav inside the header, with its links
- The content is in main
- The paragraph is inside main
- The bottom of the page is a footer
- No unlabelled boxes left