Module 3: Unordered List0 Level Beginner

12. Unordered List (Unordered List - <ul> and <li>)

Lists with bullet points and the types of bullets (disc, circle, square, none)

Real-life analogy

Like a slip for buying items from a grocery shop: it makes no difference whether you buy lentils first or sugar first. Order is not important!

Explanation

Unordered list <ul>: It is used when the points of the list have no fixed order (Sequence).

Each point is written inside a <li> (List Item) tag.
By default, round black bullets (Disc) are shown.
With the help of CSS you can change list-style-type:
- disc: A filled round black dot (default).
- circle: An empty round ring.
- square: A square box.
- none: Removes the bullets (most commonly used for building navigation menu bars).

Golden rules

Only <li> should come directly inside <ul>, no other tag.
A website's navigation menu bar is always built with <ul style="list-style: none;">.

Common mistake

Writing <p> or <a> directly inside <ul>. Always write <li><a>...</a></li>.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <!-- Default bullets (Disc) -->
  <h4 style="color: #047857; margin-bottom: 4px;">Grocery items (&lt;ul&gt; - Disc):</h4>
  <ul style="color: #334155; line-height: 1.6;">
    <li>Milk</li>
    <li>Bread</li>
    <li>Butter</li>
  </ul>

  <!-- Square bullets (Square) -->
  <h4 style="color: #0284c7; margin-top: 15px; margin-bottom: 4px;">Square Bullets (Square):</h4>
  <ul style="list-style-type: square; color: #334155; line-height: 1.6;">
    <li>Maths notebook</li>
    <li>Geometry box</li>
  </ul>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which style value is used to change the bullet in an unordered list to a square?

box
rect
square
cube

Show answer

Answer: square

list-style-type: square changes the bullets into square boxes.