WebsiteLogo

Lists in HTML: Ordered, Unordered, and Description Lists

Master the creation of different types of lists in HTML, including ordered lists (`

    `), unordered lists (`
      `), and description lists (`
      `).

      ⬅ Previous Next ➡

      HTML Lists: Ordered, Unordered, and Description Lists

      Learn about ordered lists (<ol>), unordered lists (<ul>), and description lists (<dl>) in HTML and how to use them effectively.

      Lists in HTML

      HTML provides three main types of lists to organize content:

      • Ordered Lists (<ol>): Present items in a specific sequence or order.
      • Unordered Lists (<ul>): Present items where the order is not important.
      • Description Lists (<dl>): Present terms and their corresponding descriptions.

      Ordered Lists (<ol>)

      An ordered list is used when the sequence of items matters. It uses numbers or letters to indicate the order.

      Example:

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

      Result:

      1. First step
      2. Second step
      3. Third step

      Attributes:

      • type: Specifies the type of marker (1, a, A, i, I). Defaults to '1'.
      • start: Specifies the starting value of the list.
      • reversed: Specifies that the order of the list should be reversed (new in HTML5).

      Example with attributes:

       <ol type="A" start="3" reversed>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

      Result:

      1. First step
      2. Second step
      3. Third step

      Unordered Lists (<ul>)

      An unordered list is used when the sequence of items is not important. It uses bullet points by default.

      Example:

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

      Result:

      • Item 1
      • Item 2
      • Item 3

      Attributes: While the `type` attribute was deprecated in HTML4 and removed in HTML5, you can still style the bullet point using CSS. The common way to style the bullets is using the `list-style-type` property.

      Example with CSS styling:

       <ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

      Result:

      • Item 1
      • Item 2
      • Item 3

      Other common list-style-type values include: circle, disc (default), and none (to remove the bullets entirely).

      Description Lists (<dl>)

      A description list is used to present terms and their descriptions, like a dictionary or glossary.

      Example:

       <dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language: The standard markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets:  Used to describe the look and formatting of an HTML document.</dd>
</dl>

      Result:

      HTML
      HyperText Markup Language: The standard markup language for creating web pages.
      CSS
      Cascading Style Sheets: Used to describe the look and formatting of an HTML document.
      • <dl>: Defines the description list.
      • <dt>: Defines the term (description term).
      • <dd>: Describes the term (description detail).
      ⬅ Previous Next ➡