Ordered And Unordered List In HTML Example
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Dikshita
In this tutorial we will show you the solution of ordered and unordered list in HTML example, 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, in ordered list, list is in order like it may be sorted in number, alphabets, romans etc. whereas in unordered list, the list is not sorted, only a listed in created with prefix of logos.
We will show you how both are work in html, so that you properly understand them that how they work.
Step By Step Guide On Ordered And Unordered List In HTML Example :-
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 many types for 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 ordered and unordered list in HTML example helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
