Web Platform HTML

Lists

HTML has two kinds of list. Ordered lists (OL) are the classic bulleted list, while unordered lists (UL) are numeric lists.

Both list types share the common list item element (LI), which encloses the content for each item.

While it is typical for list items to just be text, you can put almost anything inside of them - from a semantic point of view, a toolbar is a list of buttons, for example.

Lists are used both for lists which the reader would see as a textual list, as well as logical lists: a list of menu items, a list of messages, a list of buttons, and so forth. If you have a collection of things which form a list, consider using OL or UL to contain them.

With CSS, it's possible to change how the list bullet/numeral appears, and where. (or you can hide it altogether)

Ordered list

The ordered list is numbered by default in arabic numerals:

<ol>
  <li>Blue</li>
  <li>Red</li>
  <li>Yellow</li>
</ol>

You can use the list-style property to change how it appears:

<style>
.romanList {
  list-style: lower-roman;
}
</style>

<ol class="romanList">
  <li>Blue</li>
  <li>Red</li>
  <li>Yellow</li>
</ol>

Unordered list

Unordered lists have a round bullet by defaults:

<ul>
  <li>Blue</li>
  <li>Red</li>
  <li>Yellow</li>
</ul>

You can use the list-style property to change the bullet:

<style>
.squareList {
  list-style: square;
}
</style>
<ul class="squareList">
  <li>Blue</li>
  <li>Red</li>
  <li>Yellow</li>
</ul>

Other kinds of lists

With a few CSS properties, you change how list items are laid out:

<style>
.menu {
  list-style: none;
}
.menu li {
  display: inline;
  background-color: silver;
  padding: 0.4rem;
}
</style>
<ul class="menu">
  <li>Home</li>
  <li>Profile</li>
  <li>About</li>
</ul>

Read More

• OL element (MDN)
• UL element (MDN)
• list-style CSS property (CSS Tricks)