Steps on how to create list on HTML

2KB Vue

Steps on how to create list on HTML

Posté 2025-01-25 20:47:29 · Non classé

Creating lists in HTML involves using list tags. There are two main types of lists you can create:

1. Ordered List (Numbered List)

An ordered list is created using the <ol> tag. Each item in the list is represented by an <li> (list item) tag.

Example:

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

This will display:

First item
Second item
Third item

2. Unordered List (Bulleted List)

An unordered list is created using the <ul> tag. Each item in the list is represented by an <li> tag.

Example:

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

This will display:

Apples
Oranges
Bananas

3. Nested Lists

You can also create nested lists by placing one list inside another.

Example:

<ul>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrots</li>
      <li>Potatoes</li>
    </ul>
  </li>
</ul>

This will display:

Fruits
- Apples
- Oranges
Vegetables
- Carrots
- Potatoes

Styling Lists

You can style lists using CSS. For example:

<ul style="list-style-type: square; color: blue;">
  <li>Blue square item 1</li>
  <li>Blue square item 2</li>
</ul>

This changes the bullet style to squares and the text color to blue.

Connectez-vous pour aimer, partager et commenter!