CLASS X HTML TAGS UL AND OL TAGS

Here’s a breakdown of these HTML tags used to create lists:

<ul> (Unordered List): Creates a list where the items are typically marked with bullets.
- Example:
```
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>
```
- Output:
  - Apples
  - Oranges
  - Bananas
<ol> (Ordered List): Creates a list where the items are marked with numbers or letters, showing order.
- Example:
```
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
```
- Output:
  1. First item
  2. Second item
  3. Third item
<li> (List Item): Used to define each individual item in both unordered (<ul>) and ordered (<ol>) lists.

Example:


<ul>
  <li>Milk</li>
  <li>Bread</li>
</ul>
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

Output:
- Milk
- Bread

Step 1
Step 2

HTML lists can be customized using certain attributes for the <ol> and <ul> tags. Here’s a look at these attributes:

`<ol>` Attributes

start: Specifies the starting number for the first item in the ordered list. By default, an ordered list starts at 1, but you can change it to any number.
- Example:
```
<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>
```
- Output:
- 5. Item 5
  6. Item 6
  7. Item 7
type: Specifies the type of marker to use for the list items. It can have the following values:
- "1": Default; items are numbered (1, 2, 3, ...)
- "A": Uppercase letters (A, B, C, ...)
- "a": Lowercase letters (a, b, c, ...)
- "I": Uppercase Roman numerals (I, II, III, ...)
- "i": Lowercase Roman numerals (i, ii, iii, ...)
- Example:
```
<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

`<ul>` Attribute

type: Specifies the type of bullet point to use in the unordered list. It can have the following values:

"disc": Default; a filled circle (●)
"circle": An empty circle (○)
"square": A filled square (■)

Example:


<ul type="square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Output: ■ Item 1
■ Item 2
■ Item 3

Complete Example of an Ordered List in HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ordered List Example</title>
</head>
<body>

    <h1>Ordered List Example</h1>

    <!-- Basic Ordered List -->
    <h2>Basic Numeric List</h2>
    <ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>

    <!-- Ordered List with Uppercase Letters -->
    <h2>List with Uppercase Letters</h2>
    <ol type="A">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>

    <!-- Ordered List with Lowercase Roman Numerals -->
    <h2>List with Lowercase Roman Numerals</h2>
    <ol type="i">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ol>

    <!-- Nested Ordered List -->
    <h2>Nested Ordered List</h2>
    <ol>
        <li>Main Item 1</li>
        <li>Main Item 2
            <ol type="a">
                <li>Sub-item 1</li>
                <li>Sub-item 2</li>
            </ol>
        </li>
        <li>Main Item 3</li>
    </ol>

</body>
</html>