HTML List

Our day-to-day lives often involve the use of lists.

For example, when we go shopping, the bill we receive includes a list of all the items we've purchased. In a similar manner, web developers use lists to neatly display data on websites.

Types of HTML Lists

• Unordered List: Displays items using bullets.
• Ordered List: Displays items in a numerical sequence, and supports various numbering styles like Arabic numerals, Roman numerals, and so on.
• Definition List: Organizes items in a format similar to a dictionary, with terms and their corresponding definitions.

Unordered Lists:

An unordered list is a list of items where the order of the items does not matter. It is typically represented with bullet points. To create an unordered list, you use the <ul> (unordered list) element, and each list item is defined with the <li> (list item) element.

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

Ordered Lists:

An ordered list is a list of items where the order does matter, and each item is numbered. It is represented using the <ol> (ordered list) element, and like unordered lists, each item is defined with the <li> element.

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

Definition Lists:

A definition list is used to define terms along with their associated definitions. It is created using the <dl> (definition list) element. Each term is represented by the <dt> (definition term) element, and each definition is represented by the <dd> (definition description) element.

        <dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>
    

Nested Lists:

Lists can be nested inside other lists to create a hierarchical structure.

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

These are the basic constructs for creating lists in HTML. You can further style and customize lists using CSS (Cascading Style Sheets) to achieve a desired visual presentation on your web page.