HTML Lists

There are 3 different types of lists. They are as follows:

• Ordered List: A <ol> tag is used an ordered list
• Unordered List: A <ul> tag is used unordered list
• Dictionary List: A <dl> tag is used for definition lists

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.
Example:
HTML code
<h1>Types of Fruits</h1>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
Output
1.Apple
2.Banana
3.Orange
HTML code
<ol type=”a”>
<ol type=”A”>
<ol type=”i”>
<ol type=”I”>
Lower-Case Letters    
a.Apple
b.Banana
c.Orange
Upper-Case Letters
A. Apple
B. Banana
C. Orange
Lower-Case Numerals
i. Apple
ii. Banana
iii. Orange
Upper-Case Numerals
I. Apple
II. Banana
III. Orange
HTML unordered lists
Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs, and circles. The default bullet displayed by most web browsers is the traditional full disc.
HTML code
<h4 align=”center”>Types of Fruits</h4>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Output
Apple
Banana
Orange
HTML code
<ul type=”square”>
<ul type=”disc”>
<ul type=”circle”>
Output
type=”square”

• Apple
• Banana
• Orange

type=”disc”

• Apple
• Banana
• Orange

type=”circle”

• Apple
• Banana
• Orange

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
HTML Code:
<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>
Output
Fromage
French word for cheese.
Voiture
French word for car.