Nested List in HTML
Last Updated :
19 Feb, 2024
A nested list in HTML is a list that contains other lists within its list items. This creates a hierarchical structure, where each sublist is indented to visually represent its relationship to the parent list item. It’s commonly used for organizing and presenting information in a structured manner, enhancing readability and clarity of content.
Nested Unordered List in HTML
An unordered list in HTML is a collection of items represented by bullet points, providing a flexible way to display information without a specific order.
Approach:
- Use the <ul> tag to create an unordered list.
- Utilize the <li> tag to list individual items within the <ul> tag.
- The <ul> tag serves as the parent container for <li> tags, establishing the structure of the list.
- Nested lists can be created by placing additional <ul> or <ol> tags within <li> tags, enabling the creation of hierarchical structures.
Example: Implementation to create a nested unordered list.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Nested Unordered List</title>
<style>
</style>
</head>
<body>
<ul>
<li>
<h2>Frontend</h2>
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>onsubmit Attribute</li>
<li>onclick Attribute</li>
</ul>
</li>
<li>JavaScript</li>
</ul>
</li>
<li>
<h2>Library/Framework</h2>
<ul>
<li>ReactJS
<ul>
<li>Hoisting</li>
<li>Props</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
Output:
Nested Ordered List in HTML
In HTML, an ordered list organizes items in a numbered sequence, providing a structured way to present information.
Approach:
- Use the
<ol> tag to create an ordered list.
- Employ the
<li> tag to list individual items within the <ol> tag, which are automatically numbered.
- The
<ol> tag acts as the parent container for <li> tags, defining the sequential order of the list.
- To create nested ordered lists, nest additional
<ol> <ul> tags within <li> tags, facilitating the creation of hierarchical lists.
Example: Implementation to create a nested ordered list.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Nested Ordered List</title>
<style>
</style>
</head>
<body>
<ol>
<li>Subjects</li>
<ol>
<li>Mathematics</li>
<li>Science</li>
<li>Literature</li>
</ol>
<li>Programming Languages</li>
<ol>
<li>C</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>Swift</li>
</ol>
<li>Computer Science Concepts</li>
<ol>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Operating Systems</li>
<li>Database Management</li>
<li>Networking</li>
</ol>
<li>Web Technologies</li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<ol>
<li>React</li>
<li>Angular</li>
<li>Vue</li>
</ol>
<li>Bootstrap</li>
</ol>
</ol>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...