Different Types Of Lists supported By Html

admin_img Posted By Bajarangi soft , Posted On 29-09-2020

HTML lists allow web developers to group a set of related items in lists.in html we have 3 types of lists is there ordered list-'ol',Unordered list-'ul' ,Description List -'dl' List can be defined 'li' , by using list we can create a horizantal menu bar to the web page.

HTML Lists

1.Create a Lists in Html

<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

</body>
</html>
2.Order List and Unordered List
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
<br>
<h2>Ordered List with Letters</h2>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>
3.Description List
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

</body>
</html>
4. Hohrizantal list in Unordered List
<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: #111111;
        }
    </style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

</body>
</html>
5.Nested List in Ordered List
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

<ul>
    <li>Coffee</li>
    <li>Tea
        <ul>
            <li>Black tea</li>
            <li>Green tea</li>
        </ul>
    </li>
    <li>Milk</li>
</ul>

</body>
</html>

Related Post