HTML Lists: An Introduction

HTML lists are used to structure and organize information on web pages. There are two types of lists in HTML: ordered lists (ol) and unordered lists (ul).

Ordered Lists (ol)

Ordered lists use numbered items and are useful for creating outlines, or for indicating a step-by-step process. To create an ordered list, use the <ol> tag as a container, and the <li> tag for each list item:

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

This will display as:

  1. Item 1
  2. Item 2
  3. Item 3

You can also change the starting number of an ordered list by using the "start" attribute in the <ol> tag:

<ol start="5"> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> </ol>

This will display as:

  1. Item 5
  2. Item 6
  3. Item 7

Unordered Lists (ul)

Unordered lists use bullet points to show items that do not have a specific order. To create an unordered list, use the <ul> tag as a container, and the <li> tag for each list item:

<ul> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ul>

This will display as:

  • Item A
  • Item B
  • Item C

Nested Lists

Lists can also be nested within each other to create sub-lists. For example:

<ul> <li>Item A <ol> <li>Sub-item 1</li> <li>Sub-item 2</li> </ol> </li> <li>Item B <ol> <li>Sub-item 3</li> <li>Sub-item 4</li> </ol> </li> <li>Item C</li> </ul>

This will display as:

  • Item A
    1. Sub-item 1
    2. Sub-item 2
  • Item B
    1. Sub-item 3
    2. Sub-item 4
  • Item C

Styling Lists

You can style HTML lists using CSS. For example, you can change the bullet points to images or change the font style.

Conclusion

In conclusion, HTML lists are an important tool for organizing and structuring information on web pages. Whether you're using ordered lists or unordered lists, or even nested lists, they offer a flexible and effective way to present information to your audience.