HTML Lesson Seven - Lists

Lists in HTML are of two, ordered lists and unordered lists . So lets start with at the ordered lists .

Ordered Lists :

<ol>
<li>Example-1</li>
<li>Example-2</li>
<li>Example-3</li>
</ol>

Output :

1. Example-1
2. Example-2
3. Example-3

Okay, now lets give it a change . Lets use alphabets, roman numbers etc for your list .

Adding Attributes To ordered Lists :
See these examples and try them yourself .

Example - 1 :
Numbers using attributes :

<ol type="1">
<li>Example-1</li>
<li>Example-2</li>
<li>Example-3</li>
</ol>

Output :

1. Example-1
2. Example-2
3. Example-3

Example - 2 :
Using Alphabets - Upper and Lower cases :

<ol type="A">
<li>Upper-1</li>
<li>Upper-2</li>
<li>Upper-3</li>
</ol>

<ol type="a">
<li>Lower-1</li>
<li>Lower-2</li>
<li>Lower-3</li>
</ol>

Output :

1. Upper-1
2. Upper-2
3. Upper-3

1. Lower-1
2. Lower-2
3. Lower-3

Example - 3 :
Using Roman Numbers - Upper and Lower Case :

<ol type="I">
<li>Upper-1</li>
<li>Upper-2</li>
<li>Upper-3</li>
</ol>

<ol type="i">
<li>Lower-1</li>
<li>Lower-2</li>
<li>Lower-3</li>
</ol>

Output :

1. Upper-1
2. Upper-2
3. Upper-3

1. Lower-1
2. Lower-2
3. Lower-3

I hope you understand the difference and the way to achieve them .

Unordered Lists :

<ul>
<li>Example-1</li>
<li>Example-2</li>
<li>Example-3</li>
</ul>

Output :

• Example-1
• Example-2
• Example-3

Styling up unordered lists :
You can give different shapes to the bullet by adding some styles . Try these and learn it .

Example - 1 :
Round dot or disc shape :

<ul style="list-style-type:disc">
<li>Example-1</li>
<li>Example-2</li>
<li>Example-3</li>
</ul>

Output :

• Example-1
• Example-2
• Example-3

Example - 2 :
Circle :

<ul style="list-style-type:circle">
<li>Example-1</li>
<li>Example-2</li>
<li>Example-3</li>
</ul> 

Output :

• Example-1
• Example-2
• Example-3

Example - 3 :
Square Shape :

<ul style="list-style-type:square">
<li>Example-1</li>
<li>Example-2</li>
<li>Example-3</li>
</ul>

Output :

• Example-1
• Example-2
• Example-3

Example - 4 :
No bullets :

<ul style="list-style-type:none">
<li>Example-1</li>
<li>Example-2</li>
<li>Example-3</li>
</ul>

Output :

• Example-1
• Example-2
• Example-3

Okay lets windup this lesson don't forget to try these things yourself . Next lesson will be about Tables in HTML .