Lesson 2 - HTML Tags And Elements

2.6 Lists

Lists in HTML are used to organize and present collections of elements. There are two main types of lists available: ordered lists and unordered lists. List items within both types are specified using the <li> tag.

Ordered Lists

Ordered lists (<ol>) are used to create a list of items in a specific sequence, typically represented by numbers.

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

In the example above, <ol> creates an ordered list where each item (<li>) is numbered sequentially.

Unordered Lists

Unordered lists (<ul>) are used to create a list of items without any particular order, often represented by bullet points.

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Here, <ul> creates an unordered list where each item (<li>) is preceded by a bullet point.

Lists can be nested within each other to create more complex structures, and they can be styled using CSS to change the appearance of bullets or numbering.

<!-- Example of nested lists -->
<ol>
  <li>Outer item 1
    <ul>
      <li>Inner item 1</li>
      <li>Inner item 2</li>
      <li>Inner item 3</li>
    </ul>
  </li>
  <li>Outer item 2
    <ul>
      <li>Inner item 1</li>
      <li>Inner item 2</li>
    </ul>
  </li>
  <li>Outer item 3</li>
</ol>