Articles → HTML → Lists in HTML

Lists in HTML






What is a list?





Click to Enlarge


Types of lists











Ordered list





Syntax


<ol>
        <li>item1</li>
        <li>item 2</li>
</ol>



Example




















<html>
<head>
    <title>List Demo</title>
</head>
<body>
    <ol>
        <li>Gather requirements</li>
        <li>Check feasibility</li>
        <li>Requirements sign off</li>
        <li>Design system</li>
        <li>Development</li>
        <li>Testing</li>
    </ol>
</body>
</html>





Click to Enlarge




Type attribute




List item marker typeDescription
Type = ‘1’List will start with numbers. First list item marker would be 1 followed by 2, 3 and so on.
Type = ‘a’List will start with lower case alphabet. First list item marker would be a followed by b, c and so on.
Type = ‘A’List will start with upper case alphabet. First list item marker would be A followed by B, C and so on.
Type = ‘i’List will start with lower case roman number. First list item marker would be i followed by ii, iii and so on.
Type = ‘I’List will start with upper case roman number. First list item marker would be I followed by II, III and so on.




<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <ol Type="1">
        <li>Gather requirements </li>
        <li>Check feasibility </li>
        <li>Requirements sign off </li>
        <li>Design system </li>
        <li>Development </li>
        <li>Testing </li>
    </ol>
    
    <ol Type="a">
        <li>Gather requirements </li>
        <li>Check feasibility </li>
        <li>Requirements sign off </li>
        <li>Design system </li>
        <li>Development </li>
        <li>Testing </li>
    </ol>
    
    <ol Type="A">
        <li>Gather requirements </li>
        <li>Check feasibility </li>
        <li>Requirements sign off </li>
        <li>Design system </li>
        <li>Development </li>
        <li>Testing </li>
    </ol>
    
    <ol Type="i">
        <li>Gather requirements </li>
        <li>Check feasibility </li>
        <li>Requirements sign off </li>
        <li>Design system </li>
        <li>Development </li>
        <li>Testing </li>
    </ol>
    
    <ol Type="I">
        <li>Gather requirements </li>
        <li>Check feasibility </li>
        <li>Requirements sign off </li>
        <li>Design system </li>
        <li>Development </li>
        <li>Testing </li>
    </ol>
</body>
</html>





Click to Enlarge


Unordered list





Example




<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <ul>
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
</body>
</html>





Click to Enlarge


List-style-type property













Example




<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <ul style="list-style-type:disc">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
    <ul style="list-style-type:circle">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
    <ul style="list-style-type:square">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
    <ul style="list-style-type:none">
        <li>Milk</li>
        <li>Sugar</li>
        <li>Coffee</li>
    </ul>
</body>
</html>





Click to Enlarge


HTML description list





Example




<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <dl>
        <dt>Yello Pulse</dt>
        <dd>
            Fresh yellow pulse boiled and added spices for taste</dd>
        <dt>Pizza </dt>
        <dd>
            Freshly baked base with fresh vegatables.
        </dd>
    </dl>
</body>
</html>













Click to Enlarge


Browser support


Internet ExplorerFirefoxChromeSafariOperaEdge
YesYesYesYesYesYes



Posted By  -  Karan Gupta
 
Posted On  -  Monday, October 31, 2016
 
Updated On  -  Thursday, November 02, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250