List Tags: <ul> and <ol> — Demo

This page shows unordered lists (<ul>), ordered lists (<ol>), and how to style a <ul> to look like an <ol> using CSS. Each example shows the output and the code.

1. Unordered list: <ul>

<ul> = “unordered list”. Items are shown with bullets (discs by default). Use it when the order of items does not matter.

Output

My favourite fruits:

  • Apple
  • Banana
  • Orange
Code 
<p><strong>My favourite fruits:</strong></p>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>
Explanation: <ul> wraps the list; each item is in a <li> (list item). The browser shows bullets by default. You can change the bullet style with CSS (list-style-type: disc | circle | square).

2. Ordered list: <ol>

<ol> = “ordered list”. Items are numbered (1, 2, 3…). Use it when the order matters (steps, rankings, etc.).

Output

Steps to make tea:

  1. Boil water
  2. Add tea leaves or bag
  3. Add milk and sugar (optional)
  4. Serve
Code 
<p><strong>Steps to make tea:</strong></p>
<ol>
  <li>Boil water</li>
  <li>Add tea leaves or bag</li>
  <li>Add milk and sugar (optional)</li>
  <li>Serve</li>
</ol>
Explanation: <ol> tells the browser to number the <li> items automatically. You can change the style with CSS (list-style-type: decimal | upper-roman | lower-alpha, etc.).

3. Nested lists

You can put a list inside a list item: put <ul> or <ol> inside an <li>. The inner list is indented and can have its own bullet or number style.

Output

Breakfast menu (categories with sub-items):

  • Fruits
    • Apple
    • Banana
  • Hot drinks
    1. Tea
    2. Coffee
  • Toast
Code 
<p><strong>Breakfast menu:</strong></p>
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Hot drinks
    <ol>
      <li>Tea</li>
      <li>Coffee</li>
    </ol>
  </li>
  <li>Toast</li>
</ul>
Explanation: The outer list is a <ul>. The first <li> contains text (“Fruits”) and then another <ul> for sub-items. The second <li> contains “Hot drinks” and an <ol> for numbered sub-items. The third <li> has no nested list. Rule: the nested <ul> or <ol> must be placed inside an <li>, not directly inside the parent list.

4. Using <ul> but looking like <ol> (CSS)

Sometimes we keep <ul> in HTML (e.g. for semantics or reuse) but want numbers on screen. We can do that with one CSS property: list-style-type: decimal;.

Output

Top 3 languages (HTML is <ul>, styled with CSS as numbers):

  • JavaScript
  • Python
  • Java
Code 
<!-- HTML: we use ul, not ol -->
<p><strong>Top 3 languages:</strong></p>
<ul class="styled-as-ol">
  <li>JavaScript</li>
  <li>Python</li>
  <li>Java</li>
</ul>

<style>
  /* Change bullet to numbers — now it looks like an ordered list */
  ul.styled-as-ol {
    list-style-type: decimal;
    padding-left: 1.5em;
  }
</style>
Explanation: In HTML we only use <ul> and <li>. The class styled-as-ol applies list-style-type: decimal;, which replaces the default bullet with numbers (1, 2, 3…). So the structure is an unordered list, but the presentation looks like an ordered list. This shows how CSS controls how content looks without changing the HTML tags.

5. Quick summary