Unordered Lists

Create a bulleted list with ul and li.

Syntax<ul><li>Item</li></ul>

An unordered list displays items with bullet points. Use the <ul> element to create the list and <li> for each item.

Use an unordered list when the order of items does not matter, such as a shopping list.

Example

Loading editor…

Press Run to see the result.

A navigation menu is built with a <ul> so the browser communicates it as a list to screen readers.
A product features section lists bullet points using <ul> when the order of features does not matter.
A recipe ingredient list uses <ul> since the items have no required sequence.

Each <li> inside <ul> renders as a bulleted item; order carries no implied meaning.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Wrapping nav links in <ul>/<li> is the semantic pattern for menus and is expected by screen readers.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

list-style-type on <ul> changes the bullet shape; CSS can also use custom images or none.

<ul style="list-style-type: square;">
  <li>Free forever plan</li>
  <li>Unlimited projects</li>
  <li>Community support</li>
</ul>