HTML Lists
HTML Lists is used to group a set of related items in a list.
Suppose you are a Web Developer and you wanna to create any list, let’s say list of fruits. So, to make it happen you will use an HTML Lists.
HTML provides three types of lists:
- Ordered Lists
- Unordered Lists &
- Description Lists
Ordered Lists:- Ordered List is created using the <ol> tag. And inside these <ol> tags each list item is defined with <li> tag. Here each list item is automatically marked with numbers.
In an example below let’s write a code to create an ordered list.
Example
<html> <head> </head> <body> <h1>HTML Ordered Lists</h1> <ol> <li>Mango</li> <li>Orange</li> <li>Grapes</li> </ol> </body> </html>
Unordered List:- Unordered List is created using the <ul> tag. Inside these pair of<ul> tags, each list item is defined between the <li> tags. In Unordered List each list item is automatically marked with bullets (black dots).
In an example below let’s write a code to create an unordered list.
Example
<html> <head> </head> <body> <h1>HTML Unordered Lists</h1> <ul> <li>Tomato</li> <li>Potato</li> <li>Onion</li> </ol> </body> </html>
Description Lists:- We use this type of list whenever we want to provide some additional information about the list term. There are mainly three tags that are used in this type of List. <dl> tag, <dt> tag and <dd> tag.
The <dl> tag is used to define the description list. <dt> is used to define the list term. And <dd> tag is used to add the extra information about the list term.
In an example below let’s write a code to create a description list.
Example
<html> <head> </head> <body> <h1>HTML Description Lists</h1> <dl> <dt>crus4</dt> <dd>- I am learning HTML with crus4</dd> <dt>HTML</dt> <dd>- HTML is very easy</dd> </body> </html>
Insert List in a List (Nested Lists)
You can also insert a list in a list. Like this:
- Apple
- Mango
- Laptop
- Laptop is not a fruit
- Watermelon
In the above list we have inserted a list in a list. This type of list is called a Nested List.
Here is how we can create a Nested List.
Example
<html> <head> </head> <body> <ul> <li>Apple</li> <li>Mango</li> <li>Laptop</li> <ul> <li>Laptop is not a fruit</li> </ul> <li>Watermelon</li> </ul> </body> </html>
Style HTML Lists
We can also make our list to look stylish by using the type attribute. Likewise, in case of an ordered list, we can change the Numbers (1, 2, 3) into Alphabets (a, b, c) or Roman numerals (I, II, III, IV).
- watermelon
- Grapes
- Orange
- Apple
- Banana
- Mango
- Guava
- Pineapple
- Grapes
In an example below let’s write a code to create an ordered list with different list item marker.
Example
<html> <head> </head> <body> <ol type="I"> <li>watermelon</li> <li>Grapes</li> <li>Orange</li> </ol> <br> <ol type="a"> <li>Apple</li> <li>Banana</li> <li>Mango</li> </ol> <br> <ol type="A"> <li>Guava</li> <li>Pineapple</li> <li>Grapes</li> </ol> </body> </html>
We can also change the look of an unordered list by styling it with different list item marker. Here also we will use the type attribute to make it happen. Likewise, we can change the shape of bullets to small squares or small circles. Like this:
- HTML
- CSS
- JavaScript
- Bootstrap
- React JS
- Node JS
In an example below let’s write a code to change the list item marker of an unordered list.
Example
<html> <head> <body> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <br> <ul type="square"> <li>Bootstrap</li> <li>React JS</li> <li>Node JS</li> </ul> </body> </html>
Create a Horizontal List
We can also create a Horizontal list by using the CSS style attribute. Here is how the horizontal list looks like.
- HTML
- CSS
- JavaScript
In an example below let’s write a code to create a horizontal list.
Example
<html> <head> </head> <body> <h2>Display a Horizontal List</h2> <ol> <li style="display:inline;">HTML</li> <li style="display:inline;">CSS</li> <li style="display:inline;">JavaScript</li> </ol> </body> </html>
