HTML List full tutorial with programming example.
HTML TUTORIAL (PART-9)
HTML List
HTML list are use to represent listed important information; it can be used our website to make navigation list menu etc.
HTML list can be used to group a collection if items with and without order.
In HTML, list is used to perform important data point by point and it easy to understand, it also used to specify information list by list.
HTML List Elements
|
Element |
Functions |
| <ul> | It is defining an unordered list, where the order is meaningless and it is bulleted. |
| <ol> | It is defining an ordered list, where the order is meaningful and it is numbered. |
| <li> | It is common element on both <ul> and <ol>, It is used to defines list items. |
Here the Example of simple Ordered list and Unordered list.
Example of (Ordered and Unordered List) List on HTML.
<!DOCTYPE html> <html> <head> <title>HTML list</title> </head> <body> <p>Unordered List</p> <P>Programming Language</P> <ul> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>c++ Language</li> </ul> <p>Ordered List</p> <p>Programming Language</p> <ol> <li>HTML</li> <li>CSS</li> <li>java Script</li> <li>C++ Language</li> </ol> </body> </html> |
Output of above Example (Ordered and Unordered List)
Unordered ListProgramming Language
Ordered List Programming Language
|
HTML Nested List
Sometimes we need to write nest list. That time we use nest list to make represent data to understanding easily.
This is the Example of Nested List.
Example of Nested List in HTML.
<!DOCTYPE html> <html> <head> <title>HTML list</title> </head> <body> <ul> <li>Programming Language</li> <li> <ul> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>c++ Language</li> </ul> </li> <li>Programming Language</li> <li> <ol> <li>HTML</li> <li>CSS</li> <li>java Script</li> <li>C++ Language</li> </ol> </li> </ul> </body> </html> |
Output of above Example (Nested List)
|
Colouring and Changing HTML List Bullets.
You can also change the color of bullets as you like and change custom bullets. Just using the internal CSS Style.
Example of Changing & Colouring of HTML List Bullets
<!DOCTYPE html> <html> <head> <title>HTML list</title> <style type="text/css"> ul{list-style: none;} li::before {content: "*"; color: black;} </style> </head> <body> <p>Different Types of List Style.</p> <ul style="color: red;"> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>c++ Language</li> </ul> </body> </html> |
Output of above Example.
Different Types of List Style.
|
Above example you can see we take custom bullets and both bullets & text color is also change.
HTML List Style.
We can also change style of list in HTML, to change the list style we simply need to used style property from CSS (list-style-type).
HTML Example of Stylish List.
<!DOCTYPE html> <html> <head> <title>HTML list</title> <style type="text/css"> #circle {list-style-type: circle;} #upper-alpha {list-style-type:upper-alpha;} #square{list-style-type:square;} #upper-roman {list-style-type: upper-roman;} #none {list-style-type: number;} </style> </head> <body> <p>Different Types of List Style.</p> <ul id="circle"> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>c++ Language</li> </ul> <ol id="upper-alpha"> <li>HTML</li> <li>CSS</li> <li>java Script</li> <li>C++ Language</li> </ol> <ul id="square"> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>c++ Language</li> </ul> <ul id="none"> <li>HTML</li> <li>CSS</li> <li>Java Script</li> <li>c++ Language</li> </ul> <ol id="upper-roman"> <li>HTML</li> <li>CSS</li> <li>java Script</li> <li>C++ Language</li> </ol> </body> </html> |
Output of above Example (Style List)
Different Types of List Style.
|
Above output of example, you can see the different types of list style like (Circle, Square, Roman, Number) It is done by style property (list-style-type).
In this tutorial we learned HTML List, different types of list style, custom list bullets and changed color of bullets. We hope you understand this tutorial, If you have any question comments below, Comment section.
Also Learn This-
- Html unordered list.
- Html bullet list.
- Html list-style.
- Types of lists in html.
- Html list without bullets.
- Nested list in html.
- Ordered and unordered list in html example.
- How to create an unordered list in html.
3 Comments
zoritoler imol · July 2, 2022 at 12:19 am
Hey just wanted to give you a brief heads up and let you know a few of the images aren’t loading properly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same results.
suba.me · April 25, 2023 at 11:21 am
I’m not sure where you are getting your information, but good topic. I needs to spend some time learning more or understanding more. Thanks for great information I was looking for this information for my mission.
d-change.net · November 24, 2023 at 12:34 am
Good post. I will be experiencing a few of these issues as well..