HTML Lists: Ordered, Unordered and Description Lists

HTML provides three main list structures for grouping related content: <ul> for unordered items, <ol> for items where sequence matters, and <dl> for terms with descriptions. List items in <ul> and <ol> use <li>.

Quick example Top ↑

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

HTML
CSS
JavaScript

List type	Use it when	Main elements
Unordered list	Item order does not matter	`<ul>` + `<li>`
Ordered list	Sequence, ranking or step number matters	`<ol>` + `<li>`
Description list	You have terms/names and their descriptions or associated values	`<dl>` + `<dt>` + `<dd>`

Unordered lists Top ↑

Use an unordered list when the items belong together but their order is not important. Browsers normally display these items with bullets.

<ul>
  <li>PHP</li>
  <li>Python</li>
  <li>JavaScript</li>
</ul>

PHP
Python
JavaScript

Ordered lists Top ↑

Use an ordered list when sequence is meaningful, such as instructions, rankings or numbered stages.

<ol start="5">
  <li>Ronald</li>
  <li>Rajiv</li>
  <li>Alex</li>
  <li>Smith</li>
</ol>

Ronald
Rajiv
Alex
Smith

The start attribute changes the first number. Other useful features include reversed, the type attribute for numbering style, and a value attribute on an individual <li>.

<ol reversed>
  <li>Final step</li>
  <li value="10">Step numbered 10</li>
  <li>Next item</li>
</ol>

Description lists Top ↑

A description list pairs one or more terms or names with descriptions. Use <dt> for the term and <dd> for its description. The older name “definition list” is still common, but description list is broader and more accurate.

<dl>
  <dt>Domain name</dt>
  <dd>The address used to reach a website.</dd>

  <dt>Web hosting</dt>
  <dd>A service that stores and serves website files.</dd>
</dl>

Domain name: The address used to reach a website.
Web hosting: A service that stores and serves website files.

Do not use a series of <dd> elements as a substitute for an ordinary list of steps. For sequential steps, use <ol>.

Description lists in detail

Nested HTML lists Top ↑

A list can contain another list. Place the nested list inside the parent <li> that it belongs to.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

Styling HTML lists with CSS Top ↑

HTML should describe the list structure. Use CSS when you want to change bullets, numbering, spacing or other visual presentation.

<style>
ol {
  list-style-type: upper-roman;
}
ul {
  list-style-type: square;
}
li {
  margin-bottom: 0.35rem;
}
</style>

For ordered lists, use HTML attributes such as start or reversed when the numbering itself carries meaning. Use CSS when the change is only visual.

Navigation menus are often represented as lists because the links form a related group. Wrap major navigation in a <nav> element and keep the list markup semantic.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/tutorials/">Tutorials</a></li>
  </ul>
</nav>

Accessibility and good list structure Top ↑

Use a real HTML list when the content is genuinely a group of related items instead of manually typing bullets or numbers.
Choose <ol> when sequence matters and <ul> when it does not.
Keep nested lists inside the relevant parent <li>.
Use <dl> for term-description or name-value relationships, not ordinary task steps.
Do not add ARIA list roles to native <ul>, <ol> or <li> elements unless a specific compatibility problem requires it.

Common mistakes Top ↑

Using an unordered list for steps where order changes the meaning.
Using only <dd> elements instead of pairing descriptions with appropriate <dt> terms.
Putting a nested <ul> or <ol> beside its parent <li> instead of inside it.
Typing numbers or bullet characters manually instead of using semantic list markup.
Using HTML solely for visual bullet styles when CSS is the appropriate tool.

Unordered lists | Ordered lists | Description lists | HTML elements and tag types

Practice questions Top ↑

When should you use an ordered list instead of an unordered list?
Which element represents an item inside <ul> and <ol>?
What does the start attribute change on an ordered list?
What is the purpose of the reversed attribute?
Which elements are used for a description list?
Where should a nested list be placed?
When should list styling be handled with CSS?
Why is semantic list markup preferable to manually typed bullets or numbers?

Frequently asked questions Top ↑

What are the main types of HTML lists? Top ↑

The main structures are unordered lists using <ul>, ordered lists using <ol>, and description lists using <dl>.

Can <li> be used outside ul or ol? Top ↑

<li> is used as an item in an ordered or unordered list. Description lists use <dt> and <dd> instead.

Should instructions use ol or ul? Top ↑

Use <ol> when users should follow steps in a particular sequence. Use <ul> when changing the item order would not change the meaning.

Can HTML lists be nested? Top ↑

Yes. Put the nested list inside the <li> that owns that subgroup.

Can I remove or change list bullets? Top ↑

Yes. Use CSS properties such as list-style-type for visual styling while keeping the semantic HTML list structure.

Unordered List Ordered List Description List

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect: