HTML - Lists
HTML provides web developers with three different ways of displaying lists holding data. All HTML lists must contain one or more list elements. Lists can contain:
1. <ul> : An unordered list. This will display items in lists using plain bullets.
2. <ol> : An ordered list. This uses various types of numbers to display your list data.
3. <dl> : A definition list. This arranges your list items in the same way they are all in a dictionary
HTML Unordered Lists
An unordered list is a collection of items that are related and do not have any special arrangement or sequence. This kind of list can be created just by making use of the HTML <ul> tag. Every single item in the unordered list is displayed with a bullet.
Example
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
The above code will be displayed as:
The type attribute
This is an HTML attribute for <ul> tag to used to specify the style of bullet you like your list items to be displayed with. The default list type is a disc. The following are the available style of bullets:
<ul type = "square">
<ul type = "disc"> <ul type = "circle">
Example
Here is an example where the Unordered list type is square:
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul type = "square"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
The above code will be displayed as:
Example Two
Here is an example where the Unordered list type is disc:
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul type = "disc"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
The above code will be displayed as:
Example Three
Here is an example where the Unordered list type is a circle:
<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul type = "circle"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html>
The above code will be displayed as:
HTML Ordered Lists
If you eventually have to display your list in a numbered or order arrangement and not unordered or bulleted, then you can use the HTML ordered list tag. This list is generated by using <ol> HTML tag. The numbering of the list begins at one and it increases by one for each successive ordered list element that has the <li> tag
Example
<!DOCTYPE html> <html> <head> <title>HTML Ordered List</title> </head> <body> <ol> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ol> </body> </html>
The above code will be displayed as:
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
