Welcome to the chapter 10 of our HTML Tutorial series. In the last tutorial, we learnt about displaying Tables in HTML. In this tutorial, we shall go through the List in HTML.
What is an HTML List?
There are two types of list available in HTML documents:
1) Unordered List
2) Ordered List
Let’s go through these one by one…
1) Unordered List
Unordered List is a list where the list items are displayed in bullet points. The general syntax for unordered list is given below:
Syntax
<ul>
<li>Orange</li>
<li>Apple</li>
<li>Guava</li>
</ul>
The output of this HTML code will be as shown as below:
You can try running this code snippet on our Online HTML Editor to view the output.
2) Ordered List
Ordered List is a list where the list items are displayed in numeric order. The general syntax for ordered list is given below:
<ol>
<li>Orange</li>
<li>Apple</li>
<li>Guava</li>
</ol>
The output of this HTML code will be as shown as below:
List Item Formatting
1) List Style in Unordered List
You might have noticed that the unordered list contains the item markers as bullets by default. This can be changed using CSS style called “list-style-type”. An example of such style is shown below for reference.
<ul style="list-style-type:square;">
<li>Banana</li>
<li>Milk</li>
<li>Sugar</li>
</ul>
The output of the above HTML code is shown below for reference
This CSS style accept following values:
2) List Style in Ordered List
Similarly, if you want to modify the list item markers in an Ordered list, you can use the type attribute as shown below:
<ol type="A">
<li>Banana</li>
<li>Milk</li>
<li>Shake</li>
</ol>
This Attribute accepts following values:
I hope you liked reading this tutorial. Do share the tutorial among your friends.
See you in the next tutorial…
Fully customizable CRM Software for Freelancers and Small Businesses