HTML Lists

HTML Lists allow you to organize content in a structured way.
They are used for menus, steps, bullet points, or any grouped information. HTML provides three main types of lists: unordered, ordered, and description lists.

Unordered List (<ul>)

Use the <ul> tag for the list container and <li> for each item.

<ul>
  <li>HTML Basics</li>
  <li>CSS Styling</li>
  <li>JavaScript Introduction</li>
</ul>

Ordered List (<ol>)

An ordered list displays items with numbers or letters.
Use the <ol> tag for the container and <li> for items.

<ol>
  <li>Register an account</li>
  <li>Verify your email</li>
  <li>Start learning HTML</li>
</ol>

Optional attributes for <ol>:

• type="A" → Uppercase letters (A, B, C)
• type="a" → Lowercase letters (a, b, c)
• type="I" → Uppercase Roman numerals (I, II, III)
• type="i" → Lowercase Roman numerals (i, ii, iii)

Description List (<dl>)

A description list is used for terms and their descriptions.
It uses three tags: <dl> (list), <dt> (term), <dd> (description).

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language used for web pages.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets used for styling HTML.</dd>
</dl>

Nesting Lists

You can create lists inside lists for hierarchical information.

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

Best Practices

• Always use <li> inside <ul> or <ol>.
• Use <dl> for definitions, terms, or FAQs.
• Nest lists carefully for clear structure.
• Style lists using CSS for better appearance.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Conclusion

HTML Lists help structure content in bullet points, numbered steps, or definitions.
They improve readability, organization, and the overall user experience on your web pages.