Courses / HTML · Advanced

HTML Lists

Self-paced 40 sections 40 people viewed this
html html5 html tutorial learn html web development semantic html html forms html accessibility html seo html interview questions html projects beginner to advanced html

Section 9: Ordered, Unordered and Description Lists

HTML lists help organize related information into meaningful groups. They are used for navigation menus, learning objectives, product features, instructions, frequently asked questions, glossaries and many other parts of a website.

In this lesson, you will learn all three main HTML list types, their attributes, nested lists, semantic meaning, accessibility considerations and practical implementation patterns.

1. Learning Objectives

By the end of this lesson, you will be able to:

  • Understand the purpose of HTML lists.
  • Create unordered lists using ul and li.
  • Create ordered lists using ol and li.
  • Control ordered-list numbering using start, reversed and value.
  • Create description lists using dl, dt and dd.
  • Build nested lists with correct HTML structure.
  • Choose the correct list type for different situations.
  • Understand semantic HTML, accessibility and list structure.
  • Avoid common HTML list mistakes.
  • Build practical lists for real-world websites.

2. What Is an HTML List?

An HTML list groups related items into a structured collection. The browser usually displays lists with markers or numbering, depending on the list type and styling.

HTML provides three main list types:

  • Unordered list: ul, for items whose sequence is not inherently important.
  • Ordered list: ol, for items whose sequence or ranking matters.
  • Description list: dl, for terms and their associated descriptions or values.

List items in unordered and ordered lists are represented using li elements. Description lists use dt for terms and dd for their associated descriptions or values.

3. Unordered Lists

An unordered list represents a collection of items where changing the sequence does not normally change the meaning.

Use the ul element to create an unordered list and li elements for its items.

Basic Syntax

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

The browser generally displays this list with bullet markers.

Example: Course Topics

<h2>What You Will Learn</h2>

<ul>
    <li>HTML fundamentals</li>
    <li>Semantic HTML</li>
    <li>Forms and validation</li>
    <li>Accessibility basics</li>
</ul>

Use unordered lists for collections such as:

  • Features of a product.
  • Required documents.
  • Skills in a developer profile.
  • Topics covered by a course.
  • Ingredients in a recipe when sequence is not important.

Important Rule

Direct children of ul should be list items, apart from permitted script-supporting elements. Do not place arbitrary p or div elements directly inside ul and expect them to become list items.

4. Ordered Lists

An ordered list represents a collection in which sequence, ranking or numbering matters.

Use ol for the list and li for each item.

Basic Syntax

<ol>
    <li>Install a code editor</li>
    <li>Create an HTML file</li>
    <li>Write your markup</li>
    <li>Open the file in a browser</li>
</ol>

The browser generally displays the items with sequential numbers.

Example: Registration Process

<h2>How to Register</h2>

<ol>
    <li>Open the registration page.</li>
    <li>Enter your personal information.</li>
    <li>Review the information.</li>
    <li>Submit the form.</li>
</ol>

Ordered lists are suitable for:

  • Step-by-step instructions.
  • Rankings and ordered results.
  • Procedures and workflows.
  • Numbered recommendations where order matters.
  • Sequential tasks in a tutorial.

5. Ordered-List type Attribute

The type attribute on ol controls the numbering style. It changes the marker format, not the semantic purpose of the list.

Common Values

Value Marker style
1 1, 2, 3, 4
A A, B, C, D
a a, b, c, d
I I, II, III, IV
i i, ii, iii, iv

Example

<h3>Uppercase Letters</h3>
<ol type="A">
    <li>Introduction</li>
    <li>Fundamentals</li>
    <li>Advanced topics</li>
</ol>

<h3>Lowercase Roman Numerals</h3>
<ol type="i">
    <li>Planning</li>
    <li>Implementation</li>
    <li>Testing</li>
</ol>

Use these values when a specific numbering convention is meaningful. For purely visual changes, CSS list styling is usually more flexible.

6. The start Attribute

The start attribute specifies the initial ordinal value for an ordered list.

Example

<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
    <li>Seventh item</li>
</ol>

The displayed numbering begins at 5 and continues with 6 and 7.

Example: Continuing a Numbered Procedure

<h2>Additional Steps</h2>

<ol start="4">
    <li>Test the page</li>
    <li>Check accessibility</li>
    <li>Publish the website</li>
</ol>

The start attribute accepts an integer. It can be used with different numbering styles, including letters and Roman numerals, although the supplied value is an integer rather than a letter.

7. The reversed Attribute

The reversed attribute makes an ordered list count down rather than up.

Example

<ol reversed>
    <li>Third item</li>
    <li>Second item</li>
    <li>First item</li>
</ol>

For three list items, the browser normally displays 3, 2 and 1.

Example: Countdown List

<h2>Launch Countdown</h2>

<ol reversed>
    <li>Final checks</li>
    <li>Deployment</li>
    <li>Launch</li>
</ol>

When reversed is present, the default starting number depends on the number of list items unless a start value is specified.

For example, reversed="reversed" is valid HTML syntax, but reversed alone is the conventional concise form in HTML.

8. The value Attribute on li

The value attribute on an li inside an ordered list sets the item's ordinal value. Subsequent items continue from that value according to the list's counting direction.

Example

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li value="10">Tenth item</li>
    <li>Eleventh item</li>
</ol>

The numbering is 1, 2, 10 and 11.

This is useful when continuing a numbered sequence after a gap or preserving numbering across related portions of a document.

Example: Explicit List Numbering

<ol>
    <li>Prepare the project</li>
    <li>Write the HTML</li>
    <li value="5">Run final tests</li>
</ol>

The third item displays as item 5. The value attribute is a semantic numbering control, not a CSS styling property.

9. Nested Lists

A nested list is a list placed inside a list item of another list. Nested lists represent hierarchical relationships such as categories, subcategories, course modules and topics.

Correct Syntax

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend Development
        <ul>
            <li>PHP</li>
            <li>Laravel</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

Each nested ul is inside the li to which it belongs.

Nested Ordered and Unordered Lists

<ol>
    <li>Learn HTML
        <ul>
            <li>Elements</li>
            <li>Attributes</li>
        </ul>
    </li>
    <li>Learn CSS
        <ul>
            <li>Selectors</li>
            <li>Flexbox</li>
        </ul>
    </li>
</ol>

This structure combines an ordered learning sequence with unordered topics under each step.

Important Nesting Rule

Do not put a nested list directly inside an ol or ul as a sibling of li. Place it inside the appropriate li element.

10. Description Lists

A description list represents one or more terms or names and their associated descriptions, values or other metadata.

It uses three main elements:

  • dl: the description list container.
  • dt: a term or name.
  • dd: a description or associated value.

Basic Syntax

<dl>
    <dt>HTML</dt>
    <dd>A markup language used to structure web content.</dd>

    <dt>CSS</dt>
    <dd>A stylesheet language used to control presentation.</dd>
</dl>

Browsers commonly indent dd elements, but the exact presentation depends on browser defaults and CSS.

Example: Technical Glossary

<h2>Web Development Glossary</h2>

<dl>
    <dt>DOM</dt>
    <dd>The Document Object Model represents a document
        as a structure that programs can access and modify.</dd>

    <dt>HTTP</dt>
    <dd>A protocol used for communication between clients
        and servers on the web.</dd>

    <dt>URL</dt>
    <dd>An identifier that locates a resource and describes
        how it can be accessed.</dd>
</dl>

Multiple Descriptions for One Term

A term may have more than one associated description.

<dl>
    <dt>HTML</dt>
    <dd>Structures webpage content.</dd>
    <dd>Provides semantic meaning to document elements.</dd>
</dl>

Here, both descriptions are associated with the same term.

Multiple Terms Sharing a Description

A description can also apply to multiple related terms.

<dl>
    <dt>JPEG</dt>
    <dt>WebP</dt>
    <dd>Image formats commonly used for web photographs.</dd>
</dl>

Description lists are not restricted to dictionaries. They can also represent metadata, product specifications and other name-value relationships.

11. Real-World Use Cases for Description Lists

Product Specifications

<h2>Laptop Specifications</h2>

<dl>
    <dt>Processor</dt>
    <dd>Intel Core i5</dd>

    <dt>Memory</dt>
    <dd>8 GB RAM</dd>

    <dt>Storage</dt>
    <dd>512 GB SSD</dd>
</dl>

Course Information

<h2>HTML Mastery Course</h2>

<dl>
    <dt>Level</dt>
    <dd>Beginner to Advanced</dd>

    <dt>Learning Format</dt>
    <dd>Self-paced</dd>

    <dt>Topics</dt>
    <dd>HTML elements, forms, semantics and accessibility.</dd>
</dl>

Frequently Asked Questions

A description list can represent question-and-answer relationships, although headings and paragraphs or the details element may be more suitable depending on the desired interaction and content structure.

<dl>
    <dt>What is HTML?</dt>
    <dd>HTML is a markup language for structuring web content.</dd>

    <dt>Is HTML a programming language?</dt>
    <dd>No. HTML is a markup language.</dd>
</dl>

12. Styling Lists with CSS

HTML determines the list's semantic structure. CSS controls the visual presentation, including marker style, spacing, indentation and layout.

In production applications, place reusable styles in a stylesheet rather than repeating inline styles.

Changing Unordered List Markers

<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Common unordered-list marker styles include disc, circle, square and none.

Changing Ordered List Markers

<ol style="list-style-type: upper-roman;">
    <li>Introduction</li>
    <li>Implementation</li>
    <li>Testing</li>
</ol>

CSS list-style-type supports several marker styles, including decimal, lower-alpha, upper-alpha, lower-roman and upper-roman.

Removing Markers for Navigation

<ul style="list-style: none; padding-left: 0;">
    <li><a href="/">Home</a></li>
    <li><a href="/courses/">Courses</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

Removing bullets does not remove the list's semantic meaning. This is a common pattern for website navigation.

Advanced CSS: Custom Markers

<ul style="list-style-type: none; padding-left: 0;">
    <li><span aria-hidden="true">✓ </span>Semantic HTML</li>
    <li><span aria-hidden="true">✓ </span>Accessible forms</li>
    <li><span aria-hidden="true">✓ </span>Clean markup</li>
</ul>

The check marks are decorative, so aria-hidden="true" prevents them from being announced as unnecessary content. The text still communicates each item's meaning.

For reusable components, CSS pseudo-elements and the ::marker pseudo-element can provide more maintainable marker styling.

13. Accessibility and Semantic Best Practices

Lists communicate relationships and grouping to browsers and assistive technologies. Correct list markup can make structured content easier to understand.

  • Choose the list type based on meaning, not merely on appearance.
  • Use ol when the order matters and ul when it does not.
  • Use dl for genuine term-description or name-value relationships.
  • Keep nested lists inside their appropriate list items.
  • Use meaningful introductory headings when a list needs context.
  • Do not create a list with arbitrary line breaks and bullet characters when a real HTML list is appropriate.
  • Do not use lists only to create visual indentation when another semantic structure is more appropriate.

Example: Accessible Feature List

<section aria-labelledby="features-heading">
    <h2 id="features-heading">Course Features</h2>

    <ul>
        <li>Practical examples</li>
        <li>Section-wise quizzes</li>
        <li>Self-paced learning</li>
    </ul>
</section>

The section has an accessible name derived from its heading. The ul identifies the feature collection as a list.

14. Common HTML List Mistakes

Mistake 1: Missing li Elements

<ul>
    HTML
    CSS
    JavaScript
</ul>

This is not the correct structure for a list. Place each item inside an li element.

Correct Version

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

Mistake 2: Incorrect Nested Structure

<ul>
    <li>Frontend</li>
    <ul>
        <li>HTML</li>
    </ul>
</ul>

The nested list is outside the Frontend list item. Place it inside the li that represents Frontend.

Correct Version

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
        </ul>
    </li>
</ul>

Mistake 3: Using an Unordered List for a Required Sequence

If steps must be completed in a particular order, an ordered list better communicates the sequence.

Mistake 4: Using an Ordered List Only for Styling

Do not choose ol just because you want numbered-looking markers. If sequence is unimportant, use ul and style it with CSS as needed.

Mistake 5: Using dl as a General Layout Container

A description list should represent terms and associated descriptions or values. It is not a generic replacement for div or a general page layout tool.

Mistake 6: Assuming Marker Styling Changes Meaning

Changing an ordered list's markers with CSS does not change its semantic purpose. HTML structure and CSS presentation are separate concerns.

15. Practical Exercises

Exercise 1: Skills List

Create an unordered list containing five web development skills. Add a heading above it.

Exercise 2: Step-by-Step Instructions

Create an ordered list describing how to create and open an HTML file. Use the correct semantic structure.

Exercise 3: Custom Numbering

Create an ordered list that starts at 5. Create another ordered list using uppercase letters. Then experiment with reversed numbering.

Exercise 4: Nested Learning Roadmap

Create a nested list containing Frontend Development and Backend Development. Add relevant technologies beneath each category.

Exercise 5: Product Specifications

Use a description list to display the name, processor, memory and storage of a sample laptop.

Exercise 6: Course Navigation

Create a nested list for a course navigation menu with three modules and three lessons in each module.

Exercise 7: Debug the Markup

Find and correct the mistakes in this example:

<ul>
    <li>HTML
    <li>CSS</li>
    <ol>
        <li>Selectors</li>
    </ol>
</ul>

Ensure that the list has valid nesting and that the HTML source is easy to read and maintain.

16. Section 9 Quiz: Test Your Understanding

Answer all 10 questions before reviewing the answer key. The quiz covers list types, attributes, nesting, semantics, accessibility and CSS presentation.

Question 1: Unordered Lists

Which element creates an unordered list?

  1. <ol>
  2. <ul>
  3. <dl>
  4. <li>

Question 2: Ordered Lists

Which list type is most appropriate for instructions that must be followed in sequence?

  1. Description list
  2. Unordered list
  3. Ordered list
  4. Definition container using div elements only

Question 3: Description Lists

Which element represents a term or name in a description list?

  1. <dd>
  2. <dt>
  3. <li>
  4. <term>

Question 4: Ordered-List Numbering

What is the displayed numbering of this list?

<ol start="4">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
  1. 1, 2, 3
  2. 3, 4, 5
  3. 4, 5, 6
  4. 0, 1, 2

Question 5: True or False

A nested unordered list should be placed inside the list item to which it belongs.

  1. True
  2. False

Question 6: The value Attribute

What numbering is produced by this ordered list?

<ol>
    <li>First</li>
    <li value="5">Fifth</li>
    <li>Sixth</li>
</ol>
  1. 1, 2, 3
  2. 1, 5, 6
  3. 5, 6, 7
  4. 1, 5, 3

Question 7: Description Lists

Which elements form the basic structure of a description list?

  1. ul, ol and li
  2. table, tr and td
  3. dl, dt and dd
  4. div, span and p

Question 8: Multiple Correct Answers

Which statements about HTML lists are correct? Select all that apply.

  1. The ol element represents an ordered list.
  2. The ul element represents an unordered list.
  3. The dl element is intended for any content that needs indentation.
  4. The type attribute on ol can specify marker styles such as uppercase letters or Roman numerals.

Question 9: True or False

Applying list-style-type: none in CSS removes the semantic meaning of an HTML list.

  1. True
  2. False

Question 10: Reversed Numbering

What is the default displayed numbering for the following list with three items?

<ol reversed>
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
</ol>
  1. 1, 2, 3
  2. 0, -1, -2
  3. 3, 2, 1
  4. 3, 4, 5

17. Quiz Answer Key and Explanations

Review every answer and understand why it is correct before continuing to the next section.

Answer 1: B — ul

The ul element represents an unordered list. The ol element represents an ordered list, dl represents a description list, and li represents an individual list item.

Answer 2: C — Ordered list

An ordered list is appropriate when sequence matters, such as step-by-step instructions. An unordered list is more appropriate when the sequence is not inherently important.

Answer 3: B — dt

The dt element represents a term or name in a description list. The dd element provides its associated description or value.

Answer 4: C — 4, 5, 6

The start attribute sets the initial ordinal value of the ordered list to 4. Each subsequent list item continues with the next ordinal value.

Answer 5: True

A nested list should be contained within the li element representing its parent item. This correctly communicates the hierarchical relationship between the parent and child items.

Answer 6: B — 1, 5, 6

The first item begins at 1. The value attribute sets the second item's ordinal value to 5, so the following item is numbered 6.

Answer 7: C — dl, dt and dd

The dl element contains the description list, dt represents a term or name, and dd represents an associated description or value.

Answer 8: A, B and D

  • A is correct because ol represents an ordered list.
  • B is correct because ul represents an unordered list.
  • C is incorrect because dl represents term-description or name-value relationships, not arbitrary indented content.
  • D is correct because the type attribute supports marker conventions such as A, a, I and i.

Answer 9: False

CSS changes the visual presentation of a list, not its underlying HTML semantics. A ul remains an unordered list even when its visible markers are removed.

Answer 10: C — 3, 2, 1

The reversed attribute makes the list count down. With three list items and no explicit start value, the default initial ordinal value is 3.

18. Final Revision Checklist

  • I can create unordered lists using ul and li.
  • I can create ordered lists using ol and li.
  • I understand the type, start, reversed and value attributes.
  • I can create correctly nested lists.
  • I understand dl, dt and dd.
  • I can choose the appropriate list type for real-world content.
  • I understand the difference between HTML semantics and CSS styling.
  • I can identify common list-structure errors.
  • I can create accessible lists for navigation and course content.
  • I have completed the exercises and reviewed all quiz answers.

Lesson Completion

Congratulations! You have completed Section 9 of Codementrix HTML5 Mastery.

You now understand how to create ordered, unordered and description lists, control numbering, build nested structures and use semantic markup for real-world webpages.

Next lesson: Section 10 — Tables, Captions, Headers, Spans and Accessible Data.