HTML

HTML lists are used to group related items together in a structured format. There are three main types of lists in HTML: Ordered Lists, Unordered Lists, and Definition Lists.

---

1. Unordered List (<ul>)

An unordered list displays items with bullet points by default.

Basic Syntax:

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

Output:

• Item 1
• Item 2
• Item 3

Customizing Bullet Points:

You can change the bullet style using the list-style-type property in CSS.

<ul style="list-style-type: square;">
  <li>Square Bullet</li>
  <li>Circle Bullet</li>
</ul>

---

2. Ordered List (<ol>)

An ordered list displays items with numbers or letters.

Basic Syntax:

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

Output:

1. First Item
2. Second Item
3. Third Item

Customizing Numbering Style:

Change the numbering style using type or CSS.

• Use Letters: <ol type="A"> <li>Item A</li> <li>Item B</li> </ol>
• Roman Numerals: <ol type="I"> <li>Item I</li> <li>Item II</li> </ol>

---

3. Definition List (<dl>)

A definition list is used to pair terms and their descriptions.

Basic Syntax:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Output:

HTML
    HyperText Markup Language
CSS
    Cascading Style Sheets

---

4. Nested Lists

Lists can be nested to create sub-lists.

Example:

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

Output:

• Fruits
  • Apple
  • Banana
• Vegetables
  • Carrot
  • Spinach

---

5. Styling HTML Lists

You can style lists with CSS to make them visually appealing.

Example of a Styled List:

<style>
  ul {
    list-style-type: none; /* Removes bullets */
    padding: 0;
  }
  li {
    background-color: #f4f4f4;
    margin: 5px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
</style>

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

---

6. Advanced List Features

a) Custom Images as Bullets

Replace bullets with images using list-style-image:

<ul style="list-style-image: url('bullet.png');">
  <li>Custom Bullet 1</li>
  <li>Custom Bullet 2</li>
</ul>

b) Horizontal Lists

Create horizontal lists using display: inline; or flexbox:

<style>
  ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
  }
</style>

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

---

7. Accessibility in Lists

• Use semantic tags (<ul>, <ol>, <dl>) to help screen readers.
• Add ARIA roles for more accessibility if necessary: <ul role="list"> <li>Accessible Item 1</li> <li>Accessible Item 2</li> </ul>

---

Summary Table of List Types:

List Type	Tag	Purpose
Unordered List	<ul>	Displays bullet points
Ordered List	<ol>	Displays numbers, letters, or Roman numerals
Definition List	<dl>	Defines terms and their descriptions

---