- There are 3 different types of lists.
- A <ol> tag starts an ordered list, <ul> for unordered lists, and <dl> for definition lists.
1. <ul> - unordered list; bullets
2. <ol> - ordered list; numbers
3. <dl> - definition list; dictionary
1. HTML Ordered Lists :
- Use the <ol> tag to begin an ordered list. Place the <li>(list item) tag between your opening <ol> and closing </ol> tags to create list items.
- Ordered simply means numbered, as the list below demonstrates.
<ol>
<li>Find a Job</li>
<li>Move Out</li>
</ol>
- Start your ordered list on any number besides 1 using the start attribute.
<ol start="4">
<li>Buy Food</li>
<li>Get a Degree</li>
</ol>
- There are 4 other types of ordered lists. Instead of generic numbers you can replace them with Roman numerals or letters, both capital and lower-case.
<oltype="a">
<oltype="A">
<oltype="i">
<oltype="I">
</ol>
2. HTML Unordered Lists :
- Create a bulleted list with the <ul> tag.The bullet itself comes in three sub-types: squares, discs, and circles.
- The default bullet displayed by most web browsers is the traditional full disc.
<ul>
<li>Milk</li>
<li>Chocolate</li>
</ul>
- There are 3 other types of unordered lists.
<oltype="square">
<oltype="disc">
<oltype="circle">
</ol>
3. HTML Definition Term Lists
- Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term word just above the definition itself for a unique look. It's wise to bold the terms to displace them further.
- <dl> - defines the start of the list
- <dt> - definition term
- <dd> - defining definition
<dl>
<dt><b>From age </b></dt>
<dd>French word for cheese</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dl>
4. HTML Nested Lists :
- You can also nest one list within another, so you could make an unordered list inside a
<html>
<ol>
<li>Clear out garage</li>
<ul>
<li> Tomatoes </li>
</ul>
<li>repair fence</li>
</ol>
</html>
