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