How to create Nested lists in HTML
Syntax
Syntax of HTML <ul> tag
<ul>
<li> Item 1
<ul>
<li>sub-Item 1</li>
<li>sub-Item 2</li>
<li>sub-Item 3</li>
</ul>
</li>
<li>Item 2</li>
</ul>
- HTML Nested list means list inside another list.
- HTML Nested list show information in hierarchical or sub-category format.
- HTML Nested list tag <ul> unordered list or <li> inside contain list item.
How to create Nested lists in HTML
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> How to Create Nested lists in HTML </h1>
<ul>
<ul>
<li>HTML</li>
</UL></LI>
</ul>
</body>
</html>
How to create Nested lists in HTML
Explain Program
Step 1]
<!DOCTYPE html>
- This declare the document type.
- browser that the document is written in html
Step 2 ]
<html>.... . </html>
- html is the root element of the html page.
- Every thing inside it is part of the webpage.
Step 3]
<head>
<title> HTML nested list </title>
</head>
- <head> section
- head section contains metadata about page. not visible on the page itself.
- <title> tag title section set the title of the page shows the browser tab.
Step 4]
<body>
<h1> How to Create Nested lists in HTML </h1>
- HTML <h1> heading tag.
- <h1> displays text largest heading webpage.
<ul>
<li> Web design
<ul>
<li>HTML</li>
<li>CSS
<li>PHP</li>
<li>MYSQL</li>
</UL></LI>
<li>JAVA</li>
</ul>
</ul>
- HTML <ul> tag :- Creates an unordered list (bulleted list)
<li> Web design
- HTML <li> tag :- First list item.
- <li> tag inside another <ul> placed.
- HTML <ul> tag :- create a sub list under web design
HTML
CSS
PHP
MYSQL
<li>JAVA</li>
- HTML <li> tag second main list item.
Step 5]
</body>
</html>
How to create Nested lists in HTML.
Output
Related Post :-
