<ul> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them
What does <ul> HTML Tag do?
The <ul> element is used to define an unordered list of items. Use an unordered list to contain <li> elements that do not need to be presented in numerical order and can be rearranged without changing the meaning of the list.
Display
block
Usage
semantic

Code Example

<p>Unordered list items:</p>
<ul>
  <li>Arranged in any order</li>
  <li>Will still make sense</li>
</ul>

Unordered list items:

  • Arranged in any order
  • Will still make sense

All About Lists

You might not know this, but web developers love lists. They use them all the time. As web developers ourselves, we took it upon ourselves to provide an extensive list tutorial that covers all of the basics: unordered lists, ordered lists, definition lists, countdown lists, nested lists–and even touches on some advanced topics.

Read our Lists Tutorial to learn pretty much all there is to know about HTML lists.

Lists of Items Where Order Doesn’t Matter

There are two primary types of lists available to web developers: ordered lists and unordered lists. If the order of the items in the list matters, use an ordered list. If the order of the items in the list does not matter, use an unordered list.

By default, ordered lists are displayed with numbers as the list item marker, and unordered lists are displayed with bullet points. As a result, many web developers and content authors will select between unordered and ordered lists based on whether they want numbers or bullet points next to their list items.

This is a mistake.

The list item marker be changed with CSS, but the semantic meaning conveyed by the choice of list type cannot be changed with CSS.

For example:

<p>You can use numbers as the list item marker for an unordered list by using some simple CSS:</p>
<ul class="numbered">
  <li>This is an item</li>
  <li>This is an item</li>
  <li>Looking for an item? You found one!</li>
</ul>
<style>
  .numbered {
    list-style-type: decimal;
  }
</style>

Here’s how that list is rendered in the browser:

Adam is a technical writer who specializes in developer documentation and tutorials.