Types Of List In HTML With Examples
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Riya
In this tutorial we will show you the solution of types of list in HTML with examples, in HTML there are two types of list in HTML. First one is ordered list and the other is unordered list.
The difference between them is that in ordered list, list is in order like it may be sorted with the help of numbers, alphabets, romans etc.
Whereas in unordered list, the list is not sorted, only a list in created with some disc/circles/ or squares as prefix.
We will show you how both are work in html, so that you properly understand them that how to use them in html.
Step By Step Guide On Types Of List In HTML With Examples :-
Now, as we know that there are two types of list in html. Ordered and unordered list.
And the difference between them is that how they sorted means the method with the help of which are presented on browser.
Both of them have different method to show them in browser with their different formats.
Now, here we will show you an example in which both are used to show you how they work.
<!DOCTYPE html> <html> <head> <title> Title of the document</ title> </head> <body> <!-- below is the examples of unordered list with different type methods --> <ul style="list-style-type: disc;"> <li> html </li> <li> css </li> <li> javascript </li> <li> bootstrap </li> </ul> <ul style="list-style-type: circle;"> <li> html </li> <li> css </li> <li> javascript </li> <li> bootstrap </li> </ul> <ul style="list-style-type:square"> <li> html </li> <li> css </li> <li> javascript </li> <li> bootstrap </li> </ul> <!-- now, here we give an example of ordered list types --> <ol type="1"> <li> bootstrap </li> <li> javascript </li> <li> css </li> <li> html </li> </ol> <ol type="A"> <li> bootstrap </li> <li> javascript </li> <li> css </li> <li> html </li> </ol><ol type="i"> <li> bootstrap </li> <li> javascript </li> <li> css </li> <li> html </li> </ol> <ol type="a"> <li> bootstrap </li> <li> javascript </li> <li> css </li> <li> html </li> </ol> <ol type="I"> <li> bootstrap </li> <li> javascript </li> <li> css </li> <li> html </li> </ol> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we will show you an example in which we use unordered list and ordered lists. All the codes in examples are same, but the difference is in the list-style-type attribute.
- In which we give different value to change the formats of lists. You can understand this properly, when you open the codes in your browser.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that you are able to make an ordered and unordered list in html with the help of list tags, the main thing to remember about list is of list-style-type, you can customize your lists according to your needs with the value of this tag.
I hope this tutorial on types of list in HTML with examples helps you.
About Riya
