HTML Lists

Unordered Lists <ul>

An unordered list is a collection of items where the order doesn't matter. Each item gets a bullet point by default. Use <ul> for things like feature lists, ingredients, or any group of items without a meaningful sequence.

Every item inside a <ul> must be wrapped in a <li> (list item) element. You can change the bullet style with the CSS property list-style-type — common values include disc, circle, square, and none.

<!-- Basic unordered list -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- CSS to change bullet style -->
ul {
  list-style-type: square;  /* disc | circle | square | none */
}

Ordered Lists <ol>

An ordered list renders items with sequential numbers. Use it when the order matters — step-by-step instructions, rankings, recipes, or legal clauses. Browsers automatically number <li> items starting at 1.

The <ol> element accepts two useful attributes: type controls the marker style (1, A, a, I, i) and start sets the starting number so you can resume a list or count from any value.

<!-- Default numbered list -->
<ol>
  <li>Preheat the oven to 180°C</li>
  <li>Mix the dry ingredients</li>
  <li>Fold in the wet ingredients</li>
</ol>

<!-- Uppercase letters, starting from C -->
<ol type="A" start="3">
  <li>Third option</li>
  <li>Fourth option</li>
</ol>

<!-- Roman numerals -->
<ol type="I">
  <li>Introduction</li>
  <li>Main Body</li>
  <li>Conclusion</li>
</ol>

Description Lists <dl>

A description list pairs terms with their definitions. It uses three elements: <dl> (the container), <dt> (description term), and <dd> (description detail). One <dt> can have multiple <dd> children, and multiple <dt> elements can share one <dd>.

Description lists are ideal for glossaries, FAQ pages, product specs, and any key-value metadata where you want semantic structure rather than just a table.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — controls visual presentation.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language of the web.</dd>
  <dd>Runs in the browser and on servers via Node.js.</dd>
</dl>

Nested Lists

Lists can be nested inside other lists by placing a new <ul> or <ol> inside an <li> element. This is commonly used for hierarchical navigation menus, outlines, and multi-level content structures.

Keep nesting meaningful — avoid more than 2–3 levels deep, as it hurts readability. The nested list belongs inside the parent <li>, not after it.

<ul>
  <li><a href="/">Home</a></li>
  <li>
    <a href="/courses">Courses</a>
    <!-- Nested sub-menu -->
    <ul>
      <li><a href="/courses/html">HTML Basics</a></li>
      <li><a href="/courses/css">CSS Fundamentals</a></li>
      <li><a href="/courses/js">JavaScript 101</a></li>
    </ul>
  </li>
  <li><a href="/about">About</a></li>
</ul>

Lists and Navigation

Navigation menus are almost universally built with <nav><ul><li><a> patterns. The unordered list provides the semantic structure of a collection of links; the <nav> landmark tells assistive technology it is site navigation. CSS then removes the default bullets and styles the links.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

/* CSS to remove bullets and make horizontal */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
}

Styling Lists with CSS

CSS gives you complete control over list appearance. The key properties are list-style-type (the marker shape), list-style-image (a custom image as a marker), and list-style-position (inside or outside the content box). You can also build fully custom bullets using the ::before pseudo-element.

/* Remove all default list styling */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Custom bullet using ::before */
ul li::before {
  content: "→ ";
  color: #ef4444;
  font-weight: 700;
}

/* Custom image as bullet */
ul.custom {
  list-style-image: url('bullet.svg');
}

/* Marker inside content box */
ul.inside {
  list-style-position: inside;
}

/* Shorthand */
ul {
  list-style: square inside;
}