codequick-darkmode-logo
ログインサインアップ
  • html

An Introduction to HTML Lists

HTML lists are used to organize and display information in a structured manner. There are two types of lists in HTML: unordered lists (ul) and ordered lists (ol).

Unordered Lists (ul)

An unordered list is a list of items where the order of the items does not matter. Each item in the list is represented by a list item (li) element. By default, list items are displayed with bullet points, but the appearance can be customized using CSS.

Here is an example of an unordered list:

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

This will be displayed as:

  • Item 1
  • Item 2
  • Item 3

It is possible to nest unordered lists inside other list items to create sublists. Here is an example:

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

This will be displayed as:

  • Item 1
  • Item 2
    • Subitem 1
    • Subitem 2

Ordered Lists (ol)

An ordered list is a list of items where the order of the items matters. Each item in the list is represented by a list item (li) element, just like in unordered lists. However, instead of bullet points, ordered lists display the items with a numbering scheme. By default, the numbering starts from 1, but it can be customized using HTML attributes or CSS.

Here is an example of an ordered list:

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

This will be displayed as:

  1. First item
  2. Second item
  3. Third item

Similar to unordered lists, ordered lists can also have nested lists. Here is an example:

<ol> <li>First item</li> <li>Second item <ol> <li>Nested item 1</li> <li>Nested item 2</li> </ol> </li> <li>Third item</li> </ol>

This will be displayed as:

  1. First item
  2. Second item
    1. Nested item 1
    2. Nested item 2

Both unordered lists and ordered lists can be styled using CSS to match the design of your website. You can change the font, size, color, and other properties to make the lists visually appealing and fit your overall design aesthetic.

For more information on unordered lists and ordered lists in HTML, you can refer to the following resources: