Lists

In HTML, lists are used to group related items.

There are three major types of lists

1. unordered lists
2. ordered lists
3. definition lists.

Each type has a specific purpose and is created using different HTML tags.

Unordered Lists (<ul>)

Unordered lists are used to create bulleted lists. Each item in the list is represented by the <li> (list item) tag.

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

This code will produce a list with bullets/disc(css value for this style), like this.

• Item 1
• Item 2
• Item 3

Lets say instead of bullets or discs you want to customize the style that comes infront of the list item ? you can do this using CSS.

You can use list-style-type css property to style the list items.

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

here we are using square as list style type , you can see squares rendered in place of bullet.

• Item 1
• Item 2
• Item 3

Available bullet styles include:

1. disc (default)
2. circle
3. square
4. none (no bullets)

Ordered Lists (<ol>)

Ordered lists are used to create numbered lists. Each item in the list is represented by the <li> (list item) tag.

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

This code will produce a list with numbers:

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

You can customize the numbering style using the type attribute or CSS. For example, you can change the numbering to letters or Roman numerals:

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

see it in action below

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

Available numbering styles include:

1. 1 (default)
2. A (uppercase letters)
3. a (lowercase letters)
4. I (uppercase Roman numerals)
5. i (lowercase Roman numerals)

If you want the number to start from a particular number, you can also specify the starting number of the list using the start attribute:

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

This will produce a list starting from number 5,

5. First item
6. Second item
7. Third item

Definition Lists (<dl>)

Definition lists are used to create lists of terms and their definitions. A definition list is created using the <dl> tag, with each term wrapped in a <dt> (definition term) tag and each definition wrapped in a <dd> (definition description) tag.

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

This code will produce a list like this

Term 1

Definition 1

Term 2

Definition 2

Term 3

Definition 3

You can also nest <dl> definitions within another <dl>

<dl>
  <dt>Term 1</dt>
  <dd>
    <p>Definition 1</p>
    <dl>
      <dt>Subterm 1.1</dt>
      <dd>Subdefinition 1.1</dd>
    </dl>
  </dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

It will render like below

Term 1

Definition 1

Subterm 1.1

Subdefinition 1.1

Term 2

Definition 2