Learn HTML and CSS: Lists

Lists

Hilary writes everything in long sentences: "First fill in the form, then come and meet us, and bring your ID and a pet carrier." Nobody reads that on a phone. Lists make it easy to take in.

With or without numbers

In module 1 you already made a bulleted list: <ul>, short for "unordered list". Each item is an <li>.

When the order matters, as with steps or a top three, you use <ol>, an "ordered list". The browser numbers the items itself: slip in an extra step and the numbers move along.

The difference is more than the bullets. A screen reader says "list, three items", and with an <ol> it also says which number you're on.

index.html

1<main>2  <h2>What to bring</h2>3  <ul>4    <li>Your ID</li>5    <li>A pet carrier or a lead</li>6  </ul>7  <h2>How to adopt</h2>8  <ol>9    <li>Fill in the adoption form.</li>10    <li>Come and meet your animal.</li>11    <li>Take your new housemate home.</li>12  </ol>13</main>

asiel.example

A list inside a list

An <li> can hold more than text, even a whole list. That makes a nested list: under Dogs the names of the dogs, under Cats those of the cats.

The inner list goes inside the <li>: after the text and before </li>. That way it belongs to that item.

The tree under the page shows it: the second <ul> is a child of an <li>, not of the first <ul>.

index.html

1<main>2  <h2>Looking for a home</h2>3  <ul>4    <li>Dogs5      <ul>6        <li>Rex</li>7        <li>Bella</li>8      </ul>9    </li>10    <li>Cats11      <ul>12        <li>Misty</li>13        <li>Felix</li>14      </ul>15    </li>16  </ul>17</main>

asiel.example

Try it yourself

Under the heading, add three numbered steps: Fill in the form., Come and meet us. and Take your pet home. Give the second step a bulleted list: your ID and a pet carrier.

1<main>2  <h2>How to adopt</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

With or without numbers

In module 1 you already made a bulleted list: <ul>, short for "unordered list". Each item is an <li>.

When the order matters, as with steps or a top three, you use <ol>, an "ordered list". The browser numbers the items itself: slip in an extra step and the numbers move along.

The difference is more than the bullets. A screen reader says "list, three items", and with an <ol> it also says which number you're on.

index.html

1<main>2  <h2>What to bring</h2>3  <ul>4    <li>Your ID</li>5    <li>A pet carrier or a lead</li>6  </ul>7  <h2>How to adopt</h2>8  <ol>9    <li>Fill in the adoption form.</li>10    <li>Come and meet your animal.</li>11    <li>Take your new housemate home.</li>12  </ol>13</main>

asiel.example

A list inside a list

An <li> can hold more than text, even a whole list. That makes a nested list: under Dogs the names of the dogs, under Cats those of the cats.

The inner list goes inside the <li>: after the text and before </li>. That way it belongs to that item.

The tree under the page shows it: the second <ul> is a child of an <li>, not of the first <ul>.

index.html

1<main>2  <h2>Looking for a home</h2>3  <ul>4    <li>Dogs5      <ul>6        <li>Rex</li>7        <li>Bella</li>8      </ul>9    </li>10    <li>Cats11      <ul>12        <li>Misty</li>13        <li>Felix</li>14      </ul>15    </li>16  </ul>17</main>

asiel.example

Try it yourself

Under the heading, add three numbered steps: Fill in the form., Come and meet us. and Take your pet home. Give the second step a bulleted list: your ID and a pet carrier.

1<main>2  <h2>How to adopt</h2>3</main>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example