HTML Unordered Lists Tutorial - UL and LI Elements

Understanding HTML Unordered Lists

An HTML unordered list groups related items when their sequence or order is not important.

Unordered lists use the <ul> element to contain the list and <li> elements to define each individual list item.

Unordered List Syntax

An unordered list begins with the <ul> element. Each item within the list is placed inside an <li> element.

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

Browsers normally display unordered list items with a bullet or another marker before each item.

The <ul> Element

The <ul> element represents a list of items where changing the order of the items would not substantially change the meaning of the list.

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

The <ul> element provides the list structure, while the individual items belong inside <li> elements.

The <li> Element

The <li> element represents an individual item within a list. The letters li stand for list item.

<li>HTML</li>

For an unordered list, each <li> is placed directly inside the surrounding <ul> element.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

The <menu> element represents a group of commands or related items. In modern HTML, it behaves much like an unordered list and normally contains <li> elements.

<menu>
  <li>Open</li>
  <li>Save</li>
  <li>Print</li>
</menu>

Although <menu> is typically displayed like <ul>, the elements have different meanings. Use <ul> for a general unordered collection of items and <menu> for a list of commands or controls.

The <menu> Element and Navigation

The <menu> element should not be used simply because a list of links is called a menu. The <nav> element identifies a section of navigation links, while <menu> represents commands or controls.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
  </ul>
</nav>

For a typical website navigation menu, <nav> containing a <ul> is generally the appropriate structure.

Unordered List Markers

Browsers provide a default marker for unordered list items, usually a filled circle. The appearance of list markers can be changed with CSS.

<ul>
  <li>Red</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

The HTML should describe the list's structure and meaning. Visual choices such as changing the marker to a circle, square, custom symbol, or removing it belong to CSS.

When to Use an Unordered List

Use an unordered list when the items belong together but their sequence is not significant. Examples include collections of features, ingredients when order is unimportant, related links, or groups of options.

If the sequence or ranking of the items is important, an ordered list is usually more appropriate.

HTML Unordered List Example

The following example creates an unordered list of web technologies. Edit the list items, add another item, or remove an item to see how the browser updates the list.

Play in Editor

Unordered List Best Practices

Use <ul> when the order of the list items is not important.
Place each individual item inside an <li> element.
Use list markup for content that is logically a list rather than manually adding bullet characters to paragraphs.
Keep related items together within the same list.
Use <menu> for appropriate groups of commands or controls rather than as a general replacement for <ul>.
Use <nav> to identify a major section of navigation links rather than choosing <menu> simply because the links form a navigation menu.
Use CSS rather than obsolete HTML attributes to control the appearance of list markers.
Use an ordered list when the sequence, ranking, or numbering of the items carries meaning.

Summary

The HTML <ul> element creates an unordered list, while each <li> element represents an individual list item. The <menu> element has similar list behavior but is intended for groups of commands or controls. Unordered lists are appropriate when related items need to be grouped but their order is not important, while CSS can be used to control the visual appearance of their markers.