HTML List

HTML lists are used to group related items in a well-organized format. They come in three types: ordered lists, unordered lists, and description lists.

Types of HTML Lists

1. Ordered List (<ol>)

Ordered lists are used to present items in a specific sequence. Each item is numbered.

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

Output:

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

2. Unordered List (<ul>)

Unordered lists are used to present items that do not require a specific order. Each item is marked with a bullet point.

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Output:

• Item one
• Item two
• Item three

3. Description List (<dl>)

Description lists are used for defining terms and descriptions.

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>
  <dt>CSS</dt>
  <dd>A style sheet language used for describing the presentation of a document written in HTML.</dd>
</dl>

Output: 

HTML
A markup language for creating web pages.

CSS
A style sheet language used for describing the presentation of a document written in HTML.

Nesting Lists

HTML allows nesting lists inside other lists to create sublists.

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

Output:

• Fruits
  • Apple
  • Banana
• Vegetables
  • Carrot
  • Broccoli

List Attributes

1. type Attribute for Ordered Lists

The type attribute specifies the kind of marker to use in ordered lists.

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output: 

A. First item
B. Second item
C. Third item

2. start Attribute for Ordered Lists

The start attribute defines the starting point for the list items.

<ol start="3">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output: 3. First item

1. Second item
2. Third item

3. reversed Attribute for Ordered Lists

The reversed attribute reverses the numbering of the list items.

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

Output: 3. First item

1. Second item
2. Third item

Summary

HTML lists organize related items in an ordered, unordered, or descriptive manner. They can be nested for more complex structures and enhanced with attributes like type, start, and reversed for ordered lists. Understanding how to use these lists effectively is essential for creating well-structured and readable web content.