HTML List tags

0 votes
33 views
Ethan Karla asked 16 days ago in Web Application by Ethan Karla

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

1 Answer

0 votes
Shivam Prajapati answered 16 days ago by Shivam Prajapati
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>