HTML Lists

Learn how to create and use lists in HTML

Menu

HTML Lists

HTML provides three types of lists: unordered lists, ordered lists, and description lists. Each serves a different purpose and is structured differently.

Unordered Lists

Unordered lists are used when the order of items doesn't matter. They are created using the <ul> tag, with each item enclosed in <li> tags:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered Lists

Ordered lists are used when the order of items is important. They are created using the <ol> tag:

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

Description Lists

Description lists are used to display name-value pairs. They use <dl>, <dt>, and <dd> tags:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Nested Lists

Lists can be nested inside other lists:

<ul>
  <li>List item one</li>
  <li>List item two with sub items</li>
  <ul>
    <li>Sub item 1</li>
    <li>Sub item 2</li
  </ul>
  <li>List item three</li>
</ul>

List Attributes

Lists can have various attributes to modify their appearance or behavior:

<ul style="list-style-type: square;">
  <li>Square bullet item</li>
</ul>

<ol type="A">
  <li>Uppercase letter item</li>
</ol>

<ol start="5">
  <li>Starts from number 5</li>
</ol>

These attributes allow you to customize the appearance and behavior of your lists.

Attribute: Type

The type attribute is used to specify the type of bullet point you want to use for your list. The following values are allowed:

    Unordered list

  • disc - Default bullet point
  • circle - Bullet point with a circle
  • square - Bullet point with a square

    • Ordered list

  • type="1" - List items will be numbered with numbers (default)
  • type="A" - List items will be numbered with uppercase letters
  • type="a" - List items will be numbered with lowercase letters
  • type="I" - List items will be numbered with uppercase Roman numerals
  • type="i" - List items will be numbered with lowercase Roman numerals