Nest List in HTML
In this Blog you will be able to learn about HTML list
e.g nested lists dropdown list with examples and coding
Before moving to coding part you will have to understand
the basics of this topic so first lets move to
basics of nested list
when ever you use nested list infect you want to show the hierarchy
of any thing for example
you want to show the structure of a country having provinces
districts cities and further more
you will have to use nested list .
an other use of nested list is when you want to make a drop down
list with multiple options about a particular object
HTML nested list is created in HTML document but its is
organized by CSS about which we will
study soon
as we have study about HTML list in Previous Post
if you want to learn about these topics just click
on HTML lists
Hope that you are concept is cleared about nested list
Now lets move to the coding and understand this practically
Code for Nest list :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>order list in html</title>
<meta name='viewport' content='width=device-width,
initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen'
href='main.css'>
<script src='main.js'></script>
</head>
<body>
<ol>
<li>WWW</li>
<li>Organization</li>
<li>Beginning HTML</li>
<li>
<ul>
<li>What HTML is</li>
<li>How to Write HTML</li>
<li>Doc structure</li>
<li>Headings</li>
<li>Paragraphs</li>
<li>Comments</li>
</ul>
</li>
<li>Links</li>
<li>More HTML</li>
</ol>
search education get knowledge
<a href="https://knowledge-wo.blogspot.com/">
html css php
JavaScript ajax bootstrap </a>
</body>
</html>
Try It :
you can try it By your own self but the best practice
is you should type it on
note pad or something other
so now its time to show the out put of this code
out put of above code :
- WWW
- Organization
- Beginning HTML
- What HTML is
- How to Write HTML
- Doc structure
- Headings
- Paragraphs
- Comments
- Links
- More HTML
In above output
you can see that
- What HTML is
- How to Write HTML
- Doc structure
- Headings
- Paragraphs
- Comments
is listed under order list at point 4
but you can make this list at any point e.g 1,2,3 or five
its depend on your requirements that how you want to create
nested list and for which
purpose
Note : above list is created with order list
But you can create this list by using un order list which is given bellow
Code for nested list Using un order list
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>order list in html</title>
<meta name='viewport' content='width=device-width,
initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen'
href='main.css'>
<script src='main.js'></script>
</head>
<body>
<ul>
<li>WWW</li>
<li>Organization</li>
<li>Beginning HTML</li>
<li>
<ul>
<li>What HTML is</li>
<li>How to Write HTML</li>
<li>Doc structure</li>
<li>Headings</li>
<li>Paragraphs</li>
<li>Comments</li>
</ul>
</li>
<li>Links</li>
<li>More HTML</li>
</ul>
search education get knowledge
<a href="https://knowledge-wo.blogspot.com/"> html
css php javascript
ajax bootstrap </a>
</body>
</html>
Note :
before try this code kindly first check previous code
and see the difference
you will see there is only difference of ol and ul in
complete code
if you have done lets move to the code
Output :
- WWW
- Organization
- Beginning HTML
- What HTML is
- How to Write HTML
- Doc structure
- Headings
- Paragraphs
- Comments
- Links
- More HTML
Here you can see the clear difference between order list
and un order list
order list was listed with numeric numbers but on order
list is listed with
filled circles
for more information you can visit w3school ,
SlideShare stack overflow
Thanks
Posts
Thanks for this use lesson.
ReplyDeleteEasy to understand.
stay connected
DeleteGood Approach 👍🏻👍🏻
ReplyDelete