HTML Lists

HTML lists are used to group related items together. There are three main types of lists in HTML: unordered lists (bullet points), ordered lists (numbered), and description lists.

Unordered Lists

Unordered lists are created with the <ul> tag, and list items are created with the <li> tag.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Ordered Lists

Ordered lists are created with the <ol> tag, and list items are created with the <li> tag.

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Description Lists

Description lists are created with the <dl> tag, terms with <dt>, and descriptions with <dd>.

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Nested Lists

You can nest lists inside other lists to create hierarchical structures:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Ordered List Attributes

type Attribute

Change the numbering type:

<ol type="1"><!-- Default: 1, 2, 3... -->
  <li>Item one</li>
  <li>Item two</li>
</ol>

<ol type="A"><!-- Uppercase letters: A, B, C... -->
  <li>Item one</li>
  <li>Item two</li>
</ol>

<ol type="a"><!-- Lowercase letters: a, b, c... -->
  <li>Item one</li>
  <li>Item two</li>
</ol>

<ol type="I"><!-- Uppercase Roman: I, II, III... -->
  <li>Item one</li>
  <li>Item two</li>
</ol>

<ol type="i"><!-- Lowercase Roman: i, ii, iii... -->
  <li>Item one</li>
  <li>Item two</li>
</ol>

start Attribute

Start numbering from a specific number:

<ol start="50">
  <li>Item 50</li>
  <li>Item 51</li>
  <li>Item 52</li>
</ol>

Best Practices