CS 100 (Learn) — CS 100 (Web) — Module 07

HTML :: Lists

There are two primary types of HTML lists: ordered (numbered) lists, and unordered (bullet) lists.

Ordered lists are within a pair of <ol> tags and each item is within a pair of list item (<li>) tags.

As we mentioned previously, the closing list item tag (</li>) is an optional closing tag.

<ol>
  <li> Alpha
  <li> Bravo
  <li> Charlie
</ol>

1. Alpha
2. Bravo
3. Charlie

If you don't like the numbers, you can specify alternative numbering with the type attribute.

<ol type="i">
  <li> Alpha
  <li> Bravo
  <li> Charlie
</ol>

1. Alpha
2. Bravo
3. Charlie

For the type attribute value, you can specify numbers ("1"), lower or upper case letters ("a" or "A") and upper and lower case roman numerals ("i" or "I").

We have already seen unordered lists: they have the same structure, except that the surrounding tags are <ul>.

Note that you can nest lists within other lists.

<ul>
  <li> Alpha
  <li> Bravo
  <li> Charlie
    <ul>
      <li> Charles
      <li> Chuck
    </ul>
  <li> Delta
</ul>

• Alpha
• Bravo
• Charlie
  • Charles
  • Chuck
• Delta

Note that we have indented the HTML to make it easier to read. It does not affect the indentation of the nested lists.

You can nest ordered lists within unordered lists and vice-versa. You can experiment to see how they are displayed.