What are ordered and unordered lists in HTML? Provide examples.

Lists are a way to group related items in HTML. There are two main types of lists: ordered lists and unordered lists.

Unordered Lists

Unordered lists are created using the <ul> tag, and each item inside it is defined using the <li> tag.

Example of an Unordered List

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Output:

• Apples
• Bananas
• Cherries

Ordered Lists

Ordered lists are created using the <ol> tag, and each item is still defined using <li>. Items are automatically numbered.

Example of an Ordered List

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Have breakfast</li>
</ol>

Output:

1. Wake up
2. Brush teeth
3. Have breakfast

Key Differences Between Ordered and Unordered Lists

Nested Lists

Lists can also be nested. For example, you can put an unordered list inside an ordered list item:

<ol>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ol>

Best Practices for Using Lists

• Use <ul> for items without a specific order
• Use <ol> for steps, instructions, or ranked lists
• Always use <li> for each list item
• Use nested lists carefully to maintain readability
• Use CSS for customizing bullet or number styles

Conclusion

Ordered and unordered lists are essential tools in HTML for organizing content. They improve readability, structure information clearly, and can be easily styled using CSS.

By understanding when to use <ol> vs <ul>, you can create professional and well-structured web pages.