Creating Lists in HTML

In HTML you can create lists using the <li> tag. There are two types of lists in HTML, Ordered lists and Unordered lists. In Ordered list, every item is marked with numbers. While in Unordered list, items are marked with bullets.

Unordered Lists

All the items in an Unordered list will be marked with bullets (or certain symbols).  The Unordered list is represented by <ul> tag. Check the example given below to understand how Unordered lists work in HTML.

[html]

<ul>
<li>Google</li>
<li>Facebook</li>
<li>YouTube</li>
</ul>

[/html]

Unordered list in html
Unordered list – Default Disc Type

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ul> tags.

Type Attribute Of Unordered Lists

In the example given above, You can see that the bullets are disc shaped. The default type of bullets are disc.

However you can make them square or circle according to your wish. To do that, you can use the attribute type for <ul> tag. Check the example given below.

[html]

<ul type=”square” >
<li>Google</li>
<li>Facebook</li>
<li>YouTube</li>
</ul>

<ul type=”circle” >
<li>Gmail</li>
<li>Ymail</li>
<li>Hotmail</li>
</ul>

[/html]

Unordered List – Square and Circle

Ordered Lists

All the items in Ordered lists will be marked with numbers. The Ordered Lists are represented by <ol> tag. Check the example given below to understand how Ordered lists work in HTML.

[html]

<ol>
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

[/html]

Ordered List
Ordered List

In the example above, you can see that we have used <li> tags to insert items into the list. Also all the items are then enclosed within opening and closing <ol> tags.

Start Attribute in Ordered List

You can specify the number with which the list should start using the Start attribute. Check the example given below.

[html]

<ol start=”5″ >
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

[/html]

Start Attribute
Start Attribute

Type Attribute in Ordered List

You can specify the type of numbering in the list. The types can be numerical, alphabetical (lowercase or uppercase), capital roman, small roman, etc. Check the example given below.

[html]

<ol type=”1″ >
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

<ol type=”a” >
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

<ol type=”A” >
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

<ol type=”I” >
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

<ol type=”i” >
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

[/html]

Types Of Ordered List
Types Of Ordered List

In this way you can use the start attribute and the type attribute for ordered lists. You can also use these attributes together in one single list.

For instance, if you want to create a ordered list with uppercase alphabets and starting with symbol E then you can use the code given below:

[html]

<ol type=”A” start=”5″>
<li>Windows 8</li>
<li>Windows 7</li>
<li>Windows XP</li>
</ol>

[/html]

Using Start and Type Attribute Together
Using Start and Type Attribute Together

You can test all these codes in the Codefap Online HTML Editor. Thanks for reading and do subscribe to blog feed for more amazing posts. You can find the subscription box below.

Leave a Reply