Lists

Difficulty: Beginner

Lists are one of the most commonly used HTML structures. They organize related items into a clear, scannable format. HTML provides three types of lists: unordered lists (<ul>) for items where order does not matter, ordered lists (<ol>) for sequential or ranked items, and definition lists (<dl>) for term-description pairs. Lists are block-level elements and are used everywhere - navigation menus, feature lists, step-by-step instructions, FAQs, and more.

Unordered lists use the <ul> element as a container and <li> (list item) elements for each item. By default, browsers render unordered lists with bullet points (disc markers). The <ul> element should only contain <li> elements as direct children - never put bare text or other elements directly inside <ul>. However, each <li> can contain any HTML content including paragraphs, links, images, and even other lists.

Ordered lists use the <ol> element and also contain <li> items. By default, items are numbered starting from 1. The <ol> element has useful attributes: type controls the numbering style (1 for numbers, A for uppercase letters, a for lowercase, I for Roman numerals, i for lowercase Roman), start sets the starting number, and reversed reverses the counting order. Individual <li> elements can use the value attribute to set a specific number, which also resets the count for subsequent items.

Definition lists use <dl> as the container, <dt> for the term being defined, and <dd> for the definition or description. Each <dt> can have one or more <dd> elements, and a <dl> can have multiple <dt>/<dd> pairs. Definition lists are semantically perfect for glossaries, FAQ pages, metadata displays (like 'Author: Jane Doe'), and any content with a label-value structure. They are underused despite being very useful.

Lists can be nested to create hierarchical structures. You nest a list by placing a new <ul> or <ol> inside an <li> element (not directly inside the parent <ul> or <ol>). Browsers automatically change the bullet style for nested unordered lists (disc, circle, square) and adjust indentation. Nested lists are commonly used for multi-level navigation menus, outlines, and category trees. You can mix list types - an <ol> inside a <ul> or vice versa - to create flexible hierarchies.

Code examples

Unordered and Ordered Lists

<!-- Unordered list: bullet points -->
<h3>Shopping List</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

<!-- Ordered list: numbered items -->
<h3>Setup Instructions</h3>
<ol>
  <li>Download the installer</li>
  <li>Run the setup wizard</li>
  <li>Accept the license agreement</li>
  <li>Choose installation directory</li>
  <li>Click Install</li>
</ol>

Use <ul> when the order of items does not matter (ingredients, features). Use <ol> when order is significant (steps, rankings).

Ordered List Attributes

<!-- Custom start number -->
<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>Seventh item</li>
</ol>

<!-- Reversed order -->
<ol reversed>
  <li>Bronze medal</li>
  <li>Silver medal</li>
  <li>Gold medal</li>
</ol>

<!-- Different numbering types -->
<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
  <li>Option C</li>
</ol>

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

The <ol> element supports start (starting number), reversed (count down), and type (1, A, a, I, i) attributes for flexible numbering.

Definition Lists

<!-- Glossary-style definition list -->
<h3>Web Development Terms</h3>
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language. The standard language for creating web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets. Controls the visual presentation of HTML elements.</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages.</dd>
  <dd>Can also be used server-side with Node.js.</dd>
</dl>

<!-- Metadata display -->
<dl>
  <dt>Author</dt>
  <dd>Jane Doe</dd>

  <dt>Published</dt>
  <dd>March 11, 2026</dd>

  <dt>Category</dt>
  <dd>Web Development</dd>
</dl>

Definition lists (<dl>) are perfect for term-description pairs. A term (<dt>) can have multiple descriptions (<dd>). They are ideal for glossaries, FAQs, and metadata.

Nested Lists

<!-- Nested unordered list: multi-level menu -->
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>Go</li>
    </ul>
  </li>
</ul>

<!-- Mixed: ordered steps with unordered sub-items -->
<ol>
  <li>Gather materials:
    <ul>
      <li>Flour</li>
      <li>Sugar</li>
      <li>Eggs</li>
    </ul>
  </li>
  <li>Mix ingredients together</li>
  <li>Bake at 350F for 25 minutes</li>
</ol>

Nest lists by placing a <ul> or <ol> inside an <li> element. Browsers automatically adjust bullet styles and indentation for nested levels. You can mix ordered and unordered lists.

Key points

Only <li> elements should be direct children of <ul> and <ol>. Other content goes inside the <li> tags.
Nested lists must be placed inside an <li> element, not directly inside the parent <ul> or <ol>.
Definition lists (<dl>) are underused but perfect for glossaries, FAQs, and any key-value style content.
Navigation menus are typically built with <ul> lists containing <a> links inside <li> elements, wrapped in a <nav>.

Concepts covered

Unordered Lists, Ordered Lists, Definition Lists, Nested Lists, List Styling, ul, ol, dl