Types of list in html with examples

Html list is used for well-structured content like the horizontal or vertical navigation menu bar There are 3 types of lists majorly used in HTML.

HTML Unordered list

 unordered list : unordered list  starts with <ul> tag then followed by <li> tag.

 <ul> 
<li>Unordered list 1</li>
<li>Unordered list 2</li>
<li>Unordered list 3</li>
</ul>

Result:

  • Unordered list
  • Unordered list
  • Unordered list

By default, this unordered list item will be marked With bullets. You can set the list item marker as disc, circle, Square, and none.

You can implement using this list item marker type one by one.

<ul style="list-style-type:none;">
	<li>unordered list none</li>
	<li>unordered list none</li>
	<li>unordered list none</li>
 </ul>
<ul style="list-style-type:disc;">
	<li>unordered list disc</li>
	<li>unordered list disc</li>
	<li>unordered list disc</li>
 </ul>
 
 <ul style="list-style-type:circle;">
	<li>unordered list circle</li>
	<li>unordered list circle</li>
	<li>unordered list circle</li>
 </ul>
 
 <ul style="list-style-type:square;">
	<li>unordered list square</li>
	<li>unordered list square</li>
	<li>unordered list square</li>
 </ul>

This is the result that will produce as output. based on your requirement you can change this list style type using CSS.

types of unordered list in html

HTML Ordered list

Ordered list: ordered list starts with the <ol>tag then followed by list tag <li>. You want to show list begins with numbers you can use an ordered list. for example, you are learning web development in this blog first you will start to learn html5, css3, Javascript, bootstrap, then you will start learning development parts in web development like PHP, MySQL, etc.
I want to produce this list of web development skills as numbers like this.

<h1>How to learn web development step by step</h1>
<ol> 
<li>html5</li>
<li>css3</li>
<li>javascript</li>
<li>bootstrap</li>
<li>php</li>
<li>mysql</li>
</ol>

Result:

  • html5
  • css3
  • javascript
  • bootstrap
  • php
  • mysql

By default, this ordered list item will be marked With numbers. You can set ordered list item as uppercase letters, lower case letters, uppercase roman numbers, and lowercase roman numbers

Let see an example you will understand more.

You can use the type attribute to specify numbers.


<ol type="1"> 
	<li>ordered list numbered with numbers</li>
	<li>ordered list numbered with numbers</li>
	<li>ordered list numbered with numbers</li>
	</ol>
	
	<ol type="a"> 
	<li>ordered list numbered with lowercase letters</li>
	<li>ordered list numbered with lowercase letters</li>
	<li>ordered list numbered with lowercase letters</li>
	</ol>
	
	<ol type="A"> 
	<li>ordered list numbered with uppercase letters</li>
	<li>ordered list numbered with uppercase letters</li>
	<li>ordered list numbered with uppercase letters</li>
	</ol>
	
	<ol type="I"> 
	<li>ordered list numbered with uppercase roman numbers</li>
	<li>ordered list numbered with uppercase roman numbers</li>
	<li>ordered list numbered with uppercase roman numbers</li>
	</ol>
	
	<ol type="i"> 
	<li>ordered list numbered with lowercase roman numbers</li>
	<li>ordered list numbered with lowercase roman numbers</li>
	<li>ordered list numbered with lowercase roman numbers</li>
	</ol>

Result:

The ordered list, you can start with any number for example:

<ol start="100"> 
	<li>ordered list start with any numbers</li>
	<li>ordered list start with any numbers</li>
	<li>ordered list start with any numbers</li>
	<li>ordered list start with any numbers</li>
	<li>ordered list start with any numbers</li>
	<li>ordered list start with any numbers</li>
	</ol>

Result:

ordered list in html

HTML Description Lists

Description list: HTML supports a list style which is called a definition list where entries are listed as in a dictionary.

<dl> defines description list.

<dt> defines the term (name).

<dd> defines each term.

<dl>
	<dt>html</dt>
	<dd>hyper text markup language</dd>
	<dt>css</dt>
	<dd>cascading style sheet <dd>
 </dl>

Result:

description list in html

Share on:

Leave a Comment