Structuring unordered list (ul) and list (li) tag in HTML

 In HTML, the ul tag stands for "unordered list" and the li tag stands for "list item". These tags are used in webpage development to display lists.
Here is a sample code to generate a html page using ul and li tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a href="#" /> Part 1. Introduction </li>
        <li><a href="#" /> Part 2. Getting Started</li>
        <ul>
            <li><a href="#" /> 2.1 Installing the Software</li>
            <li><a href="#" /> 2.2 Creating a New Project</li>
            <ul>
                <li><a href="#">2.2.1 Project Templates</a></li>
                <li><a href="#">2.2.2 Customizing Settings</a></li>
            </ul>
            </li>
            <li><a href="#">2.3 Exploring the Interface</a>
                <ul>
                    <li><a href="#">2.3.1 Toolbar Features</a></li>
                    <li><a href="#">2.3.2 Panel Layout</a>
                        <ul>
                            <li><a href="#">2.3.2.1 Docking Panels</a></li>
                            <li><a href="#">2.3.2.2 Tabbed Interface</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
        <li><a href="#">Part 3: Advanced Topics</a>
            <ul>
                <li><a href="#">3.1 Working with Plugins</a>
                    <ul>
                        <li><a href="#">3.1.1 Installing Plugins</a></li>
                        <li><a href="#">3.1.2 Plugin Configuration</a></li>
                    </ul>
                </li>
                <li><a href="#">3.2 Customizing the UI</a>
                    <ul>
                        <li><a href="#">3.2.1 Changing Themes</a></li>
                        <li><a href="#">3.2.2 Configuring Shortcuts</a></li>
                    </ul>
                </li>
                <li><a href="#">3.3 Optimizing Performance</a>
                    <ul>
                        <li><a href="#">3.3.1 Caching Strategies</a></li>
                        <li><a href="#">3.3.2 Resource Minification</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        
    </ul>
    <ul>
        <li><a href="#" /> Part 4. Conclusion</li>
    </ul>
</body>
</html>

output will be like this:



Post a Comment

0 Comments