Lists and links

01 / 06

A bullet list is ul and li

You make a bullet list out of two tags working together.

<ul> … the container for the whole list
<li> … each line, one item

You write the <li> inside the <ul>. That nesting is a big idea in HTML.

<ul>  <li>apples</li>  <li>oranges</li></ul>

02 / 06

Numbered lists use ol

When the order matters, use <ol> instead of <ul> and the numbers appear on their own.

The contents are still <li>.

<ol>  <li>crack the eggs</li>  <li>mix them</li>  <li>cook them</li></ol>

03 / 06

A link is an a tag

The link that joins one page to another is made with the <a> tag.

The href="..." part is where the link goes. Extra information added to a tag like this is called an attribute.

<a href="https://example.com">To the practice site</a>

04 / 06

Make the link text say what it is

The text you wrap in <a> is the link text that shows on screen. Make it words that say what will happen if you press it.

no: <a href="...">here</a>
yes: <a href="...">the prices page</a>

Software that reads a page aloud for somebody who cannot see it will sometimes pull out the links on their own. A page full of "here" tells them nothing.

<a href="/price">the prices page</a>

05 / 06

Put them together

You can also put a link inside a list item.

A collection of favourites, a navigation menu — the standard parts of a web page are made out of this pairing.

<ul>  <li><a href="https://example.com">favourite 1</a></li>  <li><a href="https://example.org">favourite 2</a></li></ul>

06 / 06

Why bother with the list tags

If all you wanted was the look, you could line up <p> tags and put a dot at the front of each. There is still a reason to use <ul>.

Write <ul> and the browser, the screen reader and the search engine all get told this is a set of items. That is what lets a reader be given "three items in total, this is the first".

A tag decides meaning, not appearance. The idea from the start of this chapter is doing its work here too.