HTML Lists

By | January 5, 2020

HTML has a list which can be used to show list information for any information. There are mainly three types of lists.

  1. Unordered list-

2. Ordered list-

3. Description list-

Unordered list:-

It is also called bullet list because all the items in it are marked with bullets. Unordered list starts with <ul> tag and ends with </ul> tag and items in it start with <li>tag. This list includes items that are Unordered .

Example:-

<ul>
	<li>First Item</li>
	<li>Second Item</li>
	<li>Third Item</li>
	<li>Fourth Item</li>
</ul>

Output:-

Unordered List

The list is coming as a list type tablet in the unordered list, but by styling it, you can change its list in this way.

<ul style="list-style-type: upper-alpha;">
	<li>First Item</li>
	<li>Second Item</li>
	<li>Third Item</li>
</ul>

<ul style="list-style-type: upper-roman;">
	<li>First Item</li>
	<li>Second Item</li>
	<li>Third Item</li>
</ul>

<ul style="list-style-type: square;">
	<li>First Item</li>
	<li>Second Item</li>
	<li>Third Item</li>
</ul>

Output:-

ul List type

Ordered list-

The ordered list starts with the tag <ol> and ends with the tag </ol>. These lists are used when the ordered list is important. All list items in the ordered list are marked with numbers by default. So it also eats the Numbered list. List items in Ordered list list start with <li> tag. sorts of –

<ol>
	<li>First Ordered Item</li>
	<li>Second Ordered Item</li>
	<li>Third Ordered Item</li>
</ol>

Output:-

ordered item

In the ordered list, the item number starts from 1 on the normal, but you can also change something like this.

<ol start="6">
	<li>First Ordered Item</li>
	<li>Second Ordered Item</li>
	<li>Third Ordered Item</li>
</ol>


<ol start="15">
	<li>First Ordered Item</li>
	<li>Second Ordered Item</li>
	<li>Third Ordered Item</li>
</ol>

Output:

olstart

You can change the style of a list item in Ordered list as follows.

<ol style="list-style-type: upper-roman;">
	<li>First Ordered Item</li>
	<li>Second Ordered Item</li>
	<li>Third Ordered Item</li>
</ol>


<ol style="list-style-type: upper-alpha;">
	<li>First Ordered Item</li>
	<li>Second Ordered Item</li>
	<li>Third Ordered Item</li>
</ol>

Output:-

ol Type Change

Description Lists:-

Description list is also a list in HTML in which if you want to define the list of subdivision then you can. Description list starts with <dl> tag and ends with </dl> tag. Description List consists of three tags.

<dl>:- <dl> defines the beginning of the tag list.

<dt>:- <dt> tag defines a word.

<dd>:-This tag defines description.

Example:-

<dl>
	<dt>The First dt tag</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipisicing.</dd>
	<dt>The second dt tag</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipisicing.</dd>
	<dt>The third dt tag</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipisicing.</dd>
</dl>

Output:-

dl list

HTML Nested Lists:-

Listing inside a list is called a nested list. Sometimes we need a list inside a list, in that case we adopt the method of nested list. sorts of:-

<ol>
	<li>List Item</li>
	<li>
		<ul>
			<li>Nested List Item</li>
			<li>Nested List Item</li>
			<li>Nested List Item</li>
		</ul>
	</li>
	<li>List Item</li>
	<li>List Item</li>
</ol>

Output:-

Nested Item
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *