Lists

HTML provides a way to create both an ordered list (with elements counting up, 1, 2, 3...) and an unordered list with bullets instead of numbers. Lists are a good way to formalize a list of items and let the HTML styling do the work for you.

Ordered lists

Here is an example of how to create an ordered list:

<p>Here is a list of ordered items:</p>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Ordered lists have a "type" attribute which defines the numbering convention to use.

To count using numbers, use type=1:

<p>Here is a list of ordered items:</p>
<ol type=1>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

To count using uppercase letters, use type=A:

<p>Here is a list of ordered items:</p>
<ol type=A>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

To count using lowercase letters, use type=a:

<p>Here is a list of ordered items:</p>
<ol type=a>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

To count using uppercase roman numerals, use type=I:

<p>Here is a list of ordered items:</p>
<ol type=I>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

To count using lowercase roman numerals, use type=i:

<p>Here is a list of ordered items:</p>
<ol type=i>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Unordered lists

Here is an example of how to create an unordered list:

Here is a list of unordered items:

• First item
• Second item
• Third item

To change the list style attributes, we can use the CSS attribute called list-style-type. The available types are:

• disc
• circle
• square
• none

Here is an example of the disc list style type:

<p>Here is a list of unordered items:</p>  
<ul >
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Here is an example of the circle list style type:

<p>Here is a list of unordered items:</p>  
<ul >
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Here is an example of the square list style type:

<p>Here is a list of unordered items:</p>  
<ul >
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Here is an example of the none list style type:

<p>Here is a list of unordered items:</p>  
<ul >
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Do it Yourself

Use <ul> and <ol> listing the list(bottom) below the text My favorite foods/drinks list.
(Hint: You can insert a list to a list like <ol> into <li>)

• Foods
  1. Egg
  2. Sushi
• Drinks
  1. Apple juice
  2. Coffee