Skip to main content

Practical Exercise 4: Ordered and Unordered Lists

In this practical exercise, you'll learn to create Ordered and Unordered Lists in HTML, understanding their syntax, structure, and applications for organizing content clearly and hierarchically.

Activity​

Create an HTML document with an ordered list (<ol>) and an unordered list (<ul>).

Interactive Solution​

DivZone ad link Logo
AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code​

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lists</title>
  </head>
  <body>
    <h1>Ordered List</h1>
    <ol>
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
    </ol>
    <h2>Unordered List</h2>
    <ul>
      <li>Element A</li>
      <li>Element B</li>
      <li>Element C</li>
    </ul>
  </body>
</html>

🧪 Exercise Variants​

Variant 1: Nested Lists — Menu with Submenu​

One of the most common applications of lists is creating navigation menus with sublevels.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
  </head>
  <body>
    <h1>Main Menu</h1>
    <ul>
      <li>
        Home
      </li>
      <li>
        Services
        <ul>
          <li>Web Development</li>
          <li>Graphic Design</li>
          <li>
            Digital Marketing
            <ul>
              <li>SEO</li>
              <li>Social Media</li>
              <li>Email Marketing</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        Products
        <ul>
          <li>Software</li>
          <li>Hardware</li>
        </ul>
      </li>
      <li>Contact</li>
    </ul>
  </body>
</html>

Golden rule: nested <li> elements always go inside another <ul> or <ol>. The structure is always ul/ol > li > ul/ol > li.

Variant 2: Advanced <ol> Attributes​

Ordered lists have attributes that allow customizing the numbering type and starting point.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>ol Attributes</title>
  </head>
  <body>
    <h1>Types of Ordered Lists</h1>

    <h2>Default numbering (numbers)</h2>
    <ol>
      <li>First step</li>
      <li>Second step</li>
      <li>Third step</li>
    </ol>

    <h2>Uppercase letters</h2>
    <ol type="A">
      <li>Option A</li>
      <li>Option B</li>
      <li>Option C</li>
    </ol>

    <h2>Roman numerals</h2>
    <ol type="I">
      <li>Chapter I</li>
      <li>Chapter II</li>
      <li>Chapter III</li>
    </ol>

    <h2>Starting from number 5</h2>
    <ol start="5">
      <li>Step 5</li>
      <li>Step 6</li>
      <li>Step 7</li>
    </ol>

    <h2>Reversed order</h2>
    <ol reversed>
      <li>Third place</li>
      <li>Second place</li>
      <li>First place</li>
    </ol>
  </body>
</html>
  • type: "1" (default), "A", "a", "I", "i".
  • start: number to start from.
  • reversed: reverses the order (HTML5).

Variant 3: Definition Lists (<dl>, <dt>, <dd>)​

There's a third type of list that's less known but very useful for glossaries and FAQs.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Glossary</title>
  </head>
  <body>
    <h1>HTML Terms Glossary</h1>

    <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language: markup language for structuring web pages.</dd>

      <dt>CSS</dt>
      <dd>Cascading Style Sheets: language for applying visual style to HTML documents.</dd>

      <dt>JavaScript</dt>
      <dd>Programming language that adds interactivity to web pages.</dd>

      <dt>DOM</dt>
      <dd>Document Object Model: structured representation of the HTML document.</dd>
    </dl>
  </body>
</html>
  • <dl>: definition list container.
  • <dt>: term to define.
  • <dd>: definition of the term.

🎯 Mini-Challenge: Put It to the Test​

Create an HTML document containing:

  • A navigation menu (<ul>) with 3 items, where one has a submenu of 2 options
  • An ordered list of 5 steps starting from number 10 using start="10"
  • A definition list with 3 web terms you know

Don't copy and paste: write the code from scratch applying what you learned in the variants.

Common Mistakes with HTML Lists​

MistakeWhy It's a Problem
Putting <li> directly inside <body> without <ul> or <ol><li> must always be a direct child of <ul>, <ol>, or <menu>
Nesting <li> inside <li> without an intermediate <ul>/<ol>The correct structure is li > ul/ol > li, not li > li
Not closing <li> properlyAlthough HTML5 allows it, mixing open and closed tags causes inconsistencies
Using <br> instead of a listIf you have multiple sequential items, use lists, not line breaks
Using type on <ul>type is obsolete on <ul>; use CSS list-style-type instead

Frequently Asked Questions​

When should I use <ol> vs <ul>?​

Use <ol> when order matters (recipe steps, rankings, sequential instructions). Use <ul> when order is not relevant (navigation menu, feature list, checklist items). The semantic difference is important for accessibility and SEO.

Can ordered and unordered lists be combined?​

Yes, and it's very common. You can have a <ul> containing an <li> with an <ol> inside, or vice versa. The key is respecting the structure: the nested <ul> or <ol> always goes inside an <li> of the upper level.

🚀 Practice with DivZone AI

Lists mastered? Create a recipe or menu page with DivZone AI and analyze how the generator organizes ordered and unordered lists in a real web project. It's the best way to solidify what you've learned!