Nested List in HTML
Define Nesting of List
A list carried within another list is referred to as a nested list. As they offer the website's hierarchical structure in HTML, nested lists are useful and generally utilized as the basis for navigation menus. Both ordered lists and unordered lists can be nested lists. You may create an ordered list within of an unordered list, an unordered list within of an ordered list, a nested unordered list, or even a nested ordered list.
You can stack lists in as much depth as you want. Although, when you stack lists too much, it can get complex. Splitting the content into multiple lists with titles or even separate pages may be advisable for lengthy lists. Avoiding nested lists deeper than three layers is a reasonable fundamental rule.
How to Create a Nested List in HTML
To create a nested list on a web page, use either the HTML <ol>"or <ul>"tags. An ordered list is created by the <ol> tag, whereas an unordered list is"created by the <ul> tag.
Unfortunately, without the HTML <li> tag, none of these techniques leads to a completely functional list. In addition to containing all the items you will need, this tag can also be utilized to build nested unordered and ordered lists.
To create a basic list:
- To define the listing of your list, you need to insert an ol> or ul> tag. Use the ol> tag to make an ordered list and the ul> tag to make an unordered list.
- Afterwards, you must enter whatever information you need to show using <li> tag. list tag(<li>) must be contained within the ol> or ul> tag.
HTML Orderd Nested List
- The sequence of each element is"crucial when designing ordered lists in HTML.
- An ordered list is easily made with"the <ol> tag. After that, display each and every item you'd like to keep in your list with the <li> tag.
- The <li> tag is derived from the <ol> tag, representing an ordered list. Additionally, we can say that the <ol> tag is a base of the <li> tag.
- To build a nested unordered or ordered list, stack further <ul> or <ol> tags after the <li> tag, which always acts as an initial child"of the <ol> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Example of Nested Orderd list </title>
</head>
<body>
<h2> List of some <b> JAVATPOINT </b> Tutorials and their few topics. </h2>
<ol>
<li> Trending Technologies
<ol>
<li> Artificial Intelligence
<ol>
<li> Application of AI... </li>
<li> History of AI.... </li>
<li> Type of AI... </li>
</ol>
</li>
<li> Selenium
<ol>
<li> Selenium Tutorial... </li>
<li> Basic Termologies... </li>
<li> Selenium Fearures... </li>
<li> Selenium limitations... </li>
<li> Selenium Tool Suite... </li>
</ol>
</li>
<li> AWS
<ol>
<li> AWS Tutorial... </li>
<li> History of AWS... </li>
<li> AWS Fearures... </li>
<li> Global Infrastructure... </li>
<li> AWS Free Tier... </li>
</ol>
</li>
</ol>
</li>
<li> Latest Tutorial
<ol>
<li> Splunk
<ol>
<li> Splunk Tutorial... </li>
<li> Splunk Environment... </li>
<li> Splunk Interface... </li>
<li> Splunk Data Ingestion... </li>
</ol>
</li>
<li> R Programming
<ol>
<li> R Tutorial... </li>
<li> R Installation... </li>
<li> RStudio IDLE... </li>
<li> R Packages... </li>
</ol>
</li>
<li> React Native
<ol>
<li> Recat Native Tutorial... </li>
<li> Environment Setup... </li>
<li> React Native View... </li>
<li> React Native Style... </li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>
Output:
HTML Nested Unordered List
- Unordered lists are sets of objects or"things"in HTML that have no requirement to be organized in a particular manner. We usually use small"bullet points for listing these elements.
- Unordered lists are easily made with the <ul> tag. After that, display each and every item you'd like to keep in your list with the <li> tag.
- The <li> tag is derived from the <ul> tag, representing an ordered list. Additionally, we can say that the <ul> tag is a base of the <li> tag.
- To build a nested unordered or ordered list, stack further <ul> or <ol> tags after the <li> tag, which always acts as an initial child of the <ol> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Example of Nested Orderd list </title>
</head>
<body>
<h2> List of some <b> JAVATPOINT </b> Tutorials and their few topics. </h2>
<ul>
<li> Latest Tutorial
<ul>
<li> Splunk
<ul>
<li> Splunk Tutorial... </li>
<li> Splunk Environment... </li>
<li> Splunk Interface... </li>
<li> Splunk Data Ingestion... </li>
</ul>
</li>
<li> R Programming
<ul>
<li> R Tutorial... </li>
<li> R Installation... </li>
<li> RStudio IDLE... </li>
<li> R Packages... </li>
</ul>
</li>
<li> React Native
<ul>
<li> Recat Native Tutorial... </li>
<li> Environment Setup... </li>
<li> React Native View... </li>
<li> React Native Style... </li>
</ul>
</li>
</ul>
</li>
<li> Trending Technologies
<ul>
<li> Artificial Intelligence
<ul>
<li> Application of AI... </li>
<li> History of AI.... </li>
<li> Type of AI... </li>
</ul>
</li>
<li> Selenium
<ul>
<li> Selenium Tutorial... </li>
<li> Basic Termologies... </li>
<li> Selenium Fearures... </li>
<li> Selenium limitations... </li>
<li> Selenium Tool Suite... </li>
</ul>
</li>
<li> AWS
<ul>
<li> AWS Tutorial... </li>
<li> History of AWS... </li>
<li> AWS Fearures... </li>
<li> Global Infrastructure... </li>
<li> AWS Free Tier... </li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Output:
