EasyCompilers

Vocabulary for this course

The terms the chapters assume, in plain words. You can open this from any chapter.

accessible name
What a browser tells a screen reader an element is called, taken from its text, its label, or an alternative description.
aria-label
An attribute that gives a control an accessible name when no visible text can serve as one.
attribute
A name, sometimes with a value, inside an opening tag that describes the element further, such as where a link goes.
control
An interactive part of a page, such as a text box, checkbox, or button, that a person can operate.
element
One complete piece of a page: an opening tag, its content, and a closing tag, or a single tag when it holds nothing.
empty element
A tag that holds nothing and has no closing partner, such as an image or a line break.
for attribute
An attribute on a label that names the control it describes, so clicking the text operates that control.
form action
The address a submitted form sends its values to, declared in the opening tag of the form.
id attribute
An attribute that gives one element a unique name, which a link or a label can point to.
label
The text attached to a control that says what it is for; clicking it focuses or operates the control it belongs to.
landmark
A page region with a recognised purpose, such as header, nav, or main, that a screen reader can jump to directly.
markup
The tags and attributes that describe the structure of a document, as opposed to its styling or behaviour.
method
The attribute that says whether a form's values travel in the address or in the request body.
name attribute
An attribute that gives a form control a key for its value when the form is submitted.
regular expression
A pattern of characters used to test or match text, such as the shape an email address must have.
request body
The part of a form submission that carries the field values, separate from the address.
reset button
A button that puts every control in a form back to the value it had when the page loaded.
sandbox
An isolated place where a page runs without reaching the rest of the site or the network.
screen reader
Software that speaks a page aloud or shows it in braille, so someone who cannot see the display can still use it.
tag
The name of an element written in angle brackets, such as p or img, which marks where that piece of the page begins or ends.

HTML from the ground up

Lists and page structure

Lists that announce themselves, and the landmark elements that let a reader — or a screen reader — jump straight to the part they want.

Part 3 of 13

Beginner15 min readBack to Courses

Lists

Three list elements cover almost everything. <ul> is an unordered list: the order does not matter. <ol> is ordered: the order is the meaning, and the browser numbers it for you. <dl> is a description list, for pairs — a term and its definition, a key and its value.

Every item in the first two is an <li>. Because the list is a real element, a screen reader says "list, 5 items" before reading them, and you can jump past it. A paragraph of bullet characters gets none of that, and its items are simply a run-on sentence when read aloud.

A recipe with real lists

Turn the ingredients into an unordered list and the steps into an ordered list, one `<li>` per item.

Live Preview
Console output will appear here...

3 left to do

  • The ingredients are an unordered list
  • The steps are an ordered list
  • There are at least eight list items in total

Wrap the whole group: <ul><li>Flour</li>…</ul>, and <ol> for the steps.

Lists can hold lists

A list item can contain another list, and that nesting is how you show a sub-step without inventing a new element. Put the inner <ul> or <ol> inside the <li> it belongs to, after that item’s own text. A list that sits beside the items instead of inside one is a list the browser has to repair.

A description list is different: <dl> holds <dt> terms and <dd> descriptions, and one term can have several descriptions. It is for pairs — a glossary, a set of details, a menu with prices — not for prose that happens to start with a bold word. A worked example reads as two pairs rather than four lines: <dl><dt>Delivery</dt><dd>Two days</dd><dt>Collection</dt><dd>Free</dd></dl>.

Lists of links

A navigation menu is a list of links, and marking it as one is not a technicality. A screen reader announces "list, 4 items" before reading the links, so a visitor knows how much navigation there is and can skip it in one movement. The same links in a run of paragraphs are four links in a sentence, and there is no boundary to skip. Put the <ul> inside the <nav>, one <li> per link; the list supplies the count and the nav supplies the name.

The landmarks of a page

Most pages have the same few regions: a header, navigation, the main content, maybe a sidebar, a footer. HTML names each of them, and those names are landmarks — the browser and assistive technology can list them so a visitor can jump straight to the main content instead of tabbing through a menu on every page.

The ones you will use constantly

  • <header> — the top of a page or of an article: a title, a logo, a byline.
  • <nav> — a group of navigation links. Label it when there is more than one.
  • <main> — the content this page exists for. Exactly one per page, and it must not be nested inside another landmark.
  • <article> — something that stands on its own: a post, a card, a comment.
  • <section> — a thematic group, usually with a heading of its own.
  • <aside> — related but secondary: a sidebar, a pull quote, a set of links.
  • <footer> — the bottom: copyright, contact, small print.

Give the page its landmarks

Replace the three plain <div> wrappers with the elements that say what each region is.

Live Preview
Console output will appear here...

3 left to do

  • The top region is a header
  • The middle region is an article
  • The bottom region is a footer

The top one is a <header>, the middle holds the article, and the last is a <footer>.

Landmarks need headings

A <section> is not a generic box with a nicer name. It is a thematic group, and it should have a heading; without one it is a region nobody can name. If you cannot write the heading, the content probably belongs in the surrounding section or in a <div>.

<article> is for something that could be lifted out and still make sense: a post, a card, a comment. <main> is for the one thing the page exists for, and it must not sit inside a header, a nav, an aside, an article or a footer. Those rules are what let a reader jump to the content instead of tabbing through the same menu on every page.

Two ways into the same page

Landmarks and headings are two maps of the same document, and they answer different questions. The landmark list says where a region is — header, navigation, main, footer — so a reader can jump straight to the content. The heading list says what the page covers, level by level, so a reader can jump to the section about delivery. A page with landmarks but no headings can be entered and not navigated; a page with headings but no landmarks makes the reader pass the menu on every visit. Write both, and keep them in the order of the visible page.

Three structural mistakes worth catching early: an <li> outside a list, which may render but cannot be navigated; more than one <main> on a page, which makes jump-to-content ambiguous; and a <section> with no heading, which announces a region with no name. A <div> is honest about having no meaning — use it when that is the truth.

Try these next

  • Nest a three-step list inside the second item of an ordered list and check the numbering.
  • Write a <dl> for three terms, and give one term two <dd> descriptions.
  • Give every <section> on a page a heading, then remove one and see what the landmark list loses.

A <div> means "a box with no meaning". There is a time for it — a styling hook with nothing to say — but if a region of your page is a header, a nav or an article, say so. The element is already there.

Check what you learned

One question at a time. A wrong answer explains itself — take another go.

Part 1 of 5

When should you reach for <ol> rather than <ul>?