EN

HTML・First steps

Bullet points with lists

"This, and this, and that" — when information lines up, a list makes it far easier to read. Let's learn how to make bullet points.

A shopping memo, a set of steps, a list of favorites. Moments where “several things line up” come up surprisingly often, don’t they? That’s when you reach for a list. It reads far more easily than cramming everything into one long paragraph.

Start with a bulleted list

For a list with no particular order, line up <li> items inside a <ul>.

<ul>
  <li>Red bean bun</li>
  <li>Milk</li>
  <li>Apple</li>
</ul>
Each item gets a ”•” dot in front, and the three line up vertically.
TagMeaning
<ul>Short for “unordered list” (a list with no order). The outer box
<li>Short for “list item.” The individual things lined up inside

You put several <li> items inside the <ul> box. “Nesting” makes an early appearance here. When displayed, each item gets a ”•“-like dot in front.

When you want numbers

When the order matters, like “step 1, 2, 3,” just change <ul> to <ol>.

<ol>
  <li>Boil the water</li>
  <li>Add the powder</li>
  <li>Wait 3 minutes</li>
</ol>

<ol> is an ordered list (a list with an order). The <li> items inside stay the same. Then, instead of dots, you get numbers: 1. 2. 3. You don’t have to write the numbers yourself — the browser adds them in order for you.

The top is <ul> (bullets), the bottom is <ol> (numbers). The contents are written exactly the same way; only the mark in front changes.
TipsCSS list design snippets you can copy and pasteFor ideas on giving your lists a stylish look, see here

A list inside a list (nesting)

When you want to hang finer items under “Fruit,” you put a whole other list inside the <li>.

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

This way, “Apple” and “Orange” appear indented one step under “Fruit,” and the parent-child relationship comes across visually too. Perfect for a table of contents or sorting into categories.

Only “Apple” and “Orange” appear indented one step to the right, and the parent-child relationship comes across at a glance.

An li’s contents aren’t limited to short words

The examples so far have put only short words in <li>, but since <li> is a box, it can hold a longer explanation too.

<ul>
  <li>
    <p>Breakfast</p>
    <p>Get bread and eggs ready</p>
  </li>
  <li>
    <p>Lunch</p>
    <p>Shape some rice balls</p>
  </li>
</ul>

Here we put a title and a description together into a single <li>. As long as it’s “the contents of one item,” <li> doesn’t mind how many <p> you put inside.

Even with two <p> inside, you can see the list still treats it as a single item.

Summary of this lesson

  1. Wrap a list in <ul> (or <ol>), and write the items with <li>
  2. Bullets are <ul>, numbers are <ol>
  3. Always put <li> inside a list

Try it: a list of favorites

Let’s add “Favorites” to Shima’s page. Set up a heading with <h2>, and below it, line things up with <ul> and <li>.

<h2>Favorites</h2>
<ul>
  <li>🎨 Drawing</li>
  <li>🍜 Ramen</li>
  <li>🎮 Games</li>
  <li>🐤 Shima</li>
</ul>

When you open it in the browser, it looks like this.

Browser view. Under the “Favorites” heading, Drawing, Ramen, Games, and Shima are lined up as a bulleted list
With ”•” marks, the four line up vertically. When you want to add more, just add one <li> line.

Once it works, try rewriting it with your own favorites. And with that, your page now has a “Favorites” section.

FAQ

Can I write more than one line of text inside an li?
Yes. An li is a box that holds a single item, so it can hold not just short words but also a longer explanation using p tags.
What if I want an ol to start from a number other than 1?
Add a start attribute to the ol. For example, writing start="5" makes the numbers begin at 5.
What if I want to hide or change the look of the bullet or the 1. 2. 3.?
That's CSS's job. In HTML you just give it the meaning "this is a list," and you adjust the look in the CSS lessons.