HTML List tags

Asked 12-Jul-2021
Viewed 197 times

0

Describe the properties of List tags in HTML? And if you describe with the help an example that will be better.


1 Answer


1

Lists are the group of similar types of related pieces of information so they are clearly associated with each other and easy to understand .
Let us understand this with the help of an example to make it more clear : 
 <!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>List | Mindstick</title>
    <style>
        body {
            margin-left: 30%;
            margin-right: 30%
        }
        .d-flex {
            display: flex;
        }
        .justify-content-center {
            justify-content: center;
        }
        .flex-row {
            flex-direction: row;
        }
        .flex-column {
            flex-direction: column;
        }
        .mb-0 {
            margin-bottom: 0px !important;
        }
        .w-100 {
            width: 100%
        }
        .m-1 {
            margin: 10px;
        }
        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class='d-flex justify-content-center flex-column'>
        <h1>List of Languages</h1>
        <ul type='square'>
            <li>Core PHP</li>
            <li>CodeIgniter</li>
            <li>Laravel</li>
            <li>.NET Framework</li>
            <li>Core Java</li>
            <li>Advance Java</li>
            <li>C#</li>
        </ul>
        <ul type='circle'>
            <li>Core PHP</li>
            <li>Codeigniter</li>
            <li>Laravel</li>
            <li>.NET Framework</li>
            <li>Core Java</li>
            <li>Advance Java</li>
            <li>C#</li>
        </ul>
        <ul type='disc'>
            <li>Core PHP</li>
            <li>Codeigniter</li>
            <li>Laravel</li>
            <li>.NET Framework</li>
            <li>Core Java</li>
            <li>Advance Java</li>
            <li>C#</li>
        </ul>
        <ol type='I'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
        <ol type='i'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
        <ol type='a'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
        <ol type='A'>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>AJAX</li>
            <li>Owl Carousel</li>
        </ol>
        <dl>
            <dt>HTML</dt>
            <dd>is a markup language</dd>
            <dt>Java</dt>
            <dd>is a programming language and platform</dd>
            <dt>JavaScript</dt>
            <dd>is a scripting language</dd>
            <dt>SQL</dt>
            <dd>is a query language</dd>
        </dl>
    </div>
</body>
</html>

Loading...
Ads