HTML Lists and their types

How to use lists in HTML

In this lesson, we will learn how to create and use lists in HTML. Lists are a great way to organize content and present information in a structured manner.

There are three types of lists in HTML: ordered lists, unordered lists, and definition lists.

Ordered Lists

An ordered list is a list of items that are numbered or lettered. It is created using the <ol> tag, and each item in the list is defined using the <li> tag.

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

1. First item
2. Second item
3. Third item

You can also specify the starting number of the list using the start attribute. For example:

<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>Seventh item</li>
</ol>

5. Fifth item
6. Sixth item
7. Seventh item

Unordered Lists

An unordered list is a list of items that are not numbered or lettered. It is created using the <ul> tag, and each item in the list is defined using the <li> tag.

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

• First item
• Second item
• Third item

You can also change the bullet style of the list items using the type attribute. The possible values for the type attribute are:

• disc (default): a solid circle
• circle: an open circle
• square: a solid square For example:

<ul type="square" style="list-style-type: square !important;">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

• First item
• Second item
• Third item

Definition Lists

A definition list is a list of terms and their definitions. It is created using the <dl> tag, with each term defined using the <dt> tag and its definition using the <dd> tag.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JavaScript</dt>
  <dd>A programming language for the web</dd>
</dl>

HTML

HyperText Markup Language

CSS

Cascading Style Sheets

JavaScript

A programming language for the web

Nested Lists

You can also create nested lists by placing one list inside another. For example, you can create a list of items that have sub-items:

<ul>
  <li>
    Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>
    Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

• Fruits
  • Apple
  • Banana
  • Orange
• Vegetables
  • Carrot
  • Broccoli
  • Spinach

Conclusion

Lists are a powerful way to organize content in HTML. They can be used to present information in a structured manner, making it easier for users to read and understand. In this lesson, we learned about the different types of lists in HTML, how to create them, and how to nest them.

Questions