DEV Community

Amol Pawar
Amol Pawar

Posted on

HTML Lists in HTML

1. Introduction

HTML Lists are elements used to group related items together in a structured, semantic format. They allow content to be organized as sequences, collections, or term-description pairs instead of plain paragraphs.

Lists are used to improve readability, structure, and accessibility of content, and they form the semantic backbone for navigation menus, steps, groupings, and glossaries in real-world HTML documents.

2. What is an HTML List?

An HTML list is a container element that holds a set of related items, each represented individually. HTML provides three list types, each with a distinct semantic meaning:

  • Ordered List (<ol>) β€” items with a defined sequence
  • Unordered List (<ul>) β€” items without a defined sequence
  • Description List (<dl>) β€” term-description pairs

Basic structure:

<ul>
  <li>Item</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Every list type follows the same core pattern: a parent container element wrapping one or more item elements.

3. Types of HTML Lists

3.1 Ordered List

An ordered list represents a set of items where the sequence matters.

Syntax:

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
  • Items are automatically numbered by the browser.
  • Use it when the order of items affects meaning (steps, rankings, instructions).

Example:

<ol>
  <li>Preheat the oven</li>
  <li>Mix the ingredients</li>
  <li>Bake for 20 minutes</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

3.2 Unordered List

An unordered list represents a set of items where the sequence does not matter.

Syntax:

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • Items are marked with bullets by default.
  • Use it for collections where order has no semantic significance (features, tags, navigation links).

Example:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

3.3 Description List

A description list represents a set of term-description pairs, not a simple bulleted list.

Syntax:

<dl>
  <dt>Term</dt>
  <dd>Description</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode
  • <dl> is the container.
  • <dt> defines a term.
  • <dd> defines its description.
  • Use it for glossaries, metadata, FAQs, or key-value style content.

Example:

<dl>
  <dt>HTML</dt>
  <dd>Markup language used to structure web content.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

4. Ordered List <ol>

<ol> defines a list where item order carries meaning. Each item inside it is written using <li>.

Basic syntax:

<ol>
  <li>First</li>
  <li>Second</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

By default, browsers number items starting from 1 and increment sequentially.

type Attribute

Controls the numbering style of the list.

Value Output
1 1, 2, 3 (default)
A A, B, C
a a, b, c
I I, II, III
i i, ii, iii 
<ol type="A">
  <li>Apple</li>
  <li>Banana</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

start Attribute

Defines the starting number of the list.

<ol start="5">
  <li>Item five</li>
  <li>Item six</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Note: start always accepts an integer, even when type is a letter or Roman numeral (e.g., start="3" with type="A" begins at C).

reversed Attribute

Reverses the numbering order (counts down instead of up).

<ol reversed>
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

value Attribute on <li>

Sets a specific number for an individual list item; numbering continues from that value for subsequent items.

<ol>
  <li value="10">Item ten</li>
  <li>Item eleven</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

5. Unordered List <ul>

<ul> defines a list where item order has no semantic meaning. Each item is written using <li>.

Syntax:

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

By default, browsers render items with a bullet marker.

Use cases:

  • Navigation menus
  • Feature lists
  • Tag collections
  • Any grouping without inherent order

Nested unordered list:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Important: The type attribute on <ul> is obsolete and should not be used. Marker appearance should be controlled with CSS (list-style-type) instead.

6. Description List <dl>

A description list represents term-description relationships, not a plain list with bullets removed. It is semantically distinct from <ul> and <ol>.

Elements:

  • <dl> β€” the container for the entire list
  • <dt> β€” defines a term (or name)
  • <dd> β€” defines the description (or value) for the preceding term

Simple example:

<dl>
  <dt>API</dt>
  <dd>A set of rules that allows programs to communicate.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Multiple terms for one description:

<dl>
  <dt>HTML</dt>
  <dt>HyperText Markup Language</dt>
  <dd>The standard markup language for web pages.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Multiple descriptions for one term:

<dl>
  <dt>CSS</dt>
  <dd>Used to style HTML elements.</dd>
  <dd>Controls layout, color, and typography.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

Use cases:

  • Glossaries
  • FAQs
  • Metadata (key-value information)
  • Definitions

7. List Item <li>

<li> represents a single item within a list. It is only valid as a child of <ul>, <ol>, or (in the <menu> element, which behaves similarly to <ul>).

Syntax:

<li>Item content</li>
Enter fullscreen mode Exit fullscreen mode

Inside <ul>:

<ul>
  <li>Coffee</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Inside <ol>:

<ol>
  <li>First step</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Inside nested lists:

<ul>
  <li>Category
    <ol>
      <li>Sub-item one</li>
      <li>Sub-item two</li>
    </ol>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

value attribute (ordered lists only):

<ol>
  <li value="3">Third</li>
  <li>Fourth</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

value is only meaningful inside <ol> since <ul> items have no numeric sequence.

8. Nested Lists

Nesting means placing a list inside a <li> element of another list. It is used to represent hierarchical relationships between items.

Rule: A nested list must be placed inside the <li> of the parent list, not directly inside the parent <ul>/<ol>.

Ordered list inside unordered list:

<ul>
  <li>Steps
    <ol>
      <li>Step one</li>
      <li>Step two</li>
    </ol>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Unordered list inside ordered list:

<ol>
  <li>Ingredients
    <ul>
      <li>Flour</li>
      <li>Sugar</li>
    </ul>
  </li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Multiple levels of nesting:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Databases</li>
    </ul>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Each nested list is fully contained within its parent <li>, keeping the structure valid and logically grouped.

9. List Attributes

<ol> Attributes

type

  • Definition: Sets the numbering style of list items.
  • Purpose: Displays numbers, letters, or Roman numerals.
  • Syntax: <ol type="A">
  • Example: 
  <ol type="I">
    <li>First</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode
  • Note: Valid values are 1, A, a, I, i.

start

  • Definition: Sets the starting value of the list.
  • Purpose: Begins numbering from a value other than 1.
  • Syntax: <ol start="4">
  • Example: 
  <ol start="4">
    <li>Fourth</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode
  • Note: Always uses an integer value regardless of type.

reversed

  • Definition: Boolean attribute that reverses numbering direction.
  • Purpose: Displays items counting down instead of up.
  • Syntax: <ol reversed>
  • Example: 
  <ol reversed>
    <li>Last</li>
    <li>First</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode
  • Note: Does not reverse the physical order of items, only the displayed numbers.

<li> Attributes

value

  • Definition: Sets a specific number for an item inside an <ol>.
  • Purpose: Overrides automatic numbering starting at that item.
  • Syntax: <li value="7">
  • Example: 
  <ol>
    <li value="7">Seven</li>
    <li>Eight</li>
  </ol>
Enter fullscreen mode Exit fullscreen mode
  • Note: Has no effect inside <ul>.

Obsolete Attributes (Do Not Use)

Attribute Element Status Replacement
type <ul> Obsolete CSS list-style-type
compact <ul> / <ol> Obsolete CSS spacing properties

10. HTML List Semantics

Semantic HTML ensures that markup conveys meaning, not just visual appearance.

  • <ul> should be used for collections where order is irrelevant.
  • <ol> should be used when sequence affects meaning.
  • <dl> should be used strictly for term-description relationships.

Accessibility benefits:

  • Screen readers announce list type and item count (e.g., "list, 4 items").
  • Proper list semantics allow users to navigate list items directly using assistive technology.
  • Using non-semantic elements (like <div>) removes this navigational and contextual information.

11. Accessibility Best Practices

  • Use the correct list element for the content's actual relationship (<ul>, <ol>, or <dl>).
  • Do not use lists purely for visual indentation; use CSS margins/padding instead.
  • Keep list structure logical β€” nested items must be inside a parent <li>.
  • Avoid unnecessary empty <li> elements.
  • Do not replace semantic lists with generic <div> elements.
  • Screen readers rely on proper list markup to announce list boundaries and item counts, so correct structure directly affects usability.

12. HTML List Best Practices

  • Use <ol> when the order of items matters.
  • Use <ul> when the order of items does not matter.
  • Use <dl> for term-description relationships.
  • Always place <li> directly inside <ul> or <ol>.
  • Use CSS for all visual/marker styling.
  • Keep nested lists logically structured inside parent <li> elements.
  • Avoid obsolete attributes like type on <ul>.
  • Write lists based on meaning, not just visual layout.

13. Common Mistakes

Using <ul> when sequence matters:

<!-- Incorrect -->
<ul>
  <li>Step 1</li>
  <li>Step 2</li>
</ul>

<!-- Correct -->
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

Using <ol> when sequence does not matter:

<!-- Incorrect -->
<ol>
  <li>Apple</li>
  <li>Banana</li>
</ol>

<!-- Correct -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Incorrect nested list placement:

<!-- Incorrect: nested list outside <li> -->
<ul>
  <li>Frontend</li>
  <ul>
    <li>HTML</li>
  </ul>
</ul>

<!-- Correct -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
    </ul>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Using <div> instead of a semantic list:

<!-- Incorrect -->
<div>Item one</div>
<div>Item two</div>

<!-- Correct -->
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Confusing <dl> with <ul>: Using <dl> for plain bulleted content instead of actual term-description pairs is a semantic misuse. <dl> should only represent pairs like a term and its definition.

Using obsolete attributes: Using type on <ul> for marker styling instead of CSS list-style-type.

14. Complete HTML List Example 

<h2>Web Development Learning Path</h2>

<ol start="1">
  <li value="1">Learn HTML fundamentals</li>
  <li>Learn CSS fundamentals</li>
  <li>Learn JavaScript basics</li>
</ol>

<h3>Topics Covered</h3>
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ol type="A">
      <li>Node.js</li>
      <li>Databases</li>
    </ol>
  </li>
</ul>

<h3>Glossary</h3>
<dl>
  <dt>HTML</dt>
  <dd>Markup language used to structure web content.</dd>

  <dt>CSS</dt>
  <dd>Style sheet language used to design web pages.</dd>
</dl>
Enter fullscreen mode Exit fullscreen mode

What this example demonstrates:

  • <ol> with the value attribute for a sequential learning path.
  • Nested <ul> inside <li> for grouped frontend topics.
  • Nested <ol type="A"> inside <li> for lettered backend topics.
  • <dl>, <dt>, and <dd> used correctly for a glossary section.

15. Quick Comparison

Element Purpose Marker/Structure Common Use
<ul> Unordered collection Bullet marker Navigation, feature lists
<ol> Ordered collection Numbered marker Steps, rankings, instructions
<dl> Term-description pairs Term + description blocks Glossaries, FAQs, metadata
Element/Attribute Purpose
<li> Defines a single list item
type Sets numbering style on <ol>
start Sets starting number of <ol>
reversed Reverses numbering order of <ol>
value Sets a specific number for an <li> in <ol>

16. Quick Revision Notes

  • <ul> β†’ unordered list
  • <ol> β†’ ordered list
  • <li> β†’ list item
  • <dl> β†’ description list
  • <dt> β†’ term
  • <dd> β†’ description
  • start β†’ starting number for <ol>
  • reversed β†’ reverses numbering for <ol>
  • value β†’ sets specific number for an <li> in <ol>
  • type on <ol> β†’ controls numbering style (1, A, a, I, i)
  • type on <ul> β†’ obsolete; use CSS instead
  • Nested lists must live inside a parent <li>

17. Interview / Practice Questions

  1. What is an HTML list?
    A structural element used to group related items using <ul>, <ol>, or <dl>.

  2. What is the difference between <ol> and <ul>?
    <ol> is used when item order matters; <ul> is used when it does not.

  3. When should <dl> be used?
    When content represents term-description relationships, such as glossaries.

  4. What is the purpose of <li>?
    To define a single item inside a <ul> or <ol>.

  5. What does the start attribute do?
    Sets the starting number of an ordered list.

  6. What does the reversed attribute do?
    Displays list numbering in descending order.

  7. What is the purpose of the value attribute?
    Sets a specific number for an individual <li> inside an <ol>.

  8. How do you create a nested list?
    Place a new <ul> or <ol> inside the <li> of the parent list.

  9. Can <ul> contain <ol>?
    Yes, list types can be nested inside each other as long as the nested list is placed inside an <li>.

  10. Why are semantic lists important?
    They convey structural meaning, improve accessibility, and allow screen readers to interpret content correctly.

18. Final Summary

HTML provides three list types: <ol> for sequences, <ul> for unordered collections, and <dl> for term-description relationships. Each list uses <li> (or <dt>/<dd> for description lists) as its item elements, supports nesting inside parent <li> elements, and offers specific attributes (type, start, reversed, value) for controlling numbering behavior. Choosing the correct list type based on content meaning, rather than visual appearance, ensures semantic correctness and accessibility.

HTML Lists β€” Visual Notes

I will provide carousel slides/images that summarize the topic.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Top comments (0)