HTML List Tag Tutorial | Ordered List | Unordered List

  • Post category:HTML
  • Post author:
  • Post last modified:June 14, 2021
  • Reading time:4 mins read
You are currently viewing HTML List Tag Tutorial | Ordered List | Unordered List

HTML List Tag

HTML list is a set of content, in HTML basically two types of the list mostly used.

  • Unordered list
  • Ordered list

And another list type is Description list we will learn more about on our later chapter.

HTML List Tag – Unordered list

An unordered list represents with the <ul> tag, and every list item is represented with the <li> tag.

<ul>
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ul>

By default unordered list-style-type property value is disk. It can be changed into the other value like circle square and none.

<ul style="list-style-type:disk;">
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ul>
<ul style="list-style-type:none;">
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ul>

Results

HTML List Tag – Ordered List

An ordered list represents with the <ol> tag, and all the list item represent with the <li> tag.

<ol>
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ol>

By default an ordered list type property value is number. You can change the into the property value like “A”, “a”, “I” and “i”

<ol type="A">
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ol>
<ol type="a">
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ol>
<ol type="I">
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ol>
<ol type="i">
<li>Mango</li>
<li>Banana</li>
<li>Coconut</li>
</ol>

Nested list

In HTML list you can add a Ordered list / Unordered list under a Ordered list / Unordered list.

Example

<ol>
<li>Mango</li>
<li>Banana</li>
  <ul>
     <li>Mango</li>
     <li>Banana</li>
     <li>Coconut</li>
  </ul>
<li>Coconut</li>
</ol>

Result

neasted list

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply