HTML Lists

 HTML Lists

The element  below represent HTML Lists that can be used to group a collection of items with and/or without order.

HTML Lists Elements

  • <ul> : defines an unordered list where the order is meaningless and is typically bulleted
  • <ol> : defines an ordered list where the order is meaningful and typically numbered
  • <li> : a child element of both <ul> and <ol> elements that defines a list item

Example:

<!doctype html>
<html>
    <head>
        <title> Ordered & Unordered Lists </title>
    </head>
    <body>
        <!--Unordered List-->
        <p> Fruits </p>
        <ul>
            <li>Apple</li>
            <li>Orange</li>
            <li>Grapse</li>
        </ul>

        <!--Ordered List-->
        <p> Fruits </p>
        <ol>
            <li>Apple</li>
            <li>Orange</li>
            <li>Grapse</li>
        </ol>
    </body>
</html>

Output:

Nested HTML Lists Example:

Sometimes we have to nest lists to make the data we represent easier to understand.
Here is an example of nesting HTML Lists.

<!doctype html>
<html>
    <head>
        <title> Nested Lists </title>
    </head>
    <body>
        <ul>
            <li>General Data</li>
            <li>
            <!--We put another lists inside an <li> element.-->       
                <ul>
                    <li>Data</li>
                    <li>Data</li>
                    <li>Data</li>
                </ul>
            </li>        
            <li>General Data</li>
            <li>
                <ol>
                    <li>Data</li>
                    <li>Data</li>
                    <li>Data</li>
                </ol>
            </li>
        </ul>
    </body>
</html>

Output:

✔️ There is no limitation to the depth of nesting and alternation of <ul> and <ol> elements.

List Style Type Example:

To change the style type of a list we simply need to the style property list-style-type.

Here is an example:
<!doctype html>
<html>
    <head>
        <title> Styling Lists </title>
        <style>
            #ul-circle {
                list-style-type: circle;
            }
            #ul-square {
                list-style-type: square;
            }
            #ol-upper-roman{
                list-style-type: upper-roman;
            }
            #ol-lower-alpha{
                list-style-type: lower-alpha;
            }
            /* removing bullets and/or numbers */
            #no-list-style-type{
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <ul id="ul-circle">
            <li>Some data here.</li>
            <li>Some data here.</li>
            <li>Some data here.</li>
        </ul>      
        <ul id="ul-square">
            <li>Some data here.</li>
            <li>Some data here.</li>
            <li>Some data here.</li>
        </ul>
        <ol id="ol-upper-roman">
            <li>Some data here.</li>
            <li>Some data here.</li>
            <li>Some data here.</li>
        </ol>
        <ol id="ol-lower-alpha">
            <li>Some data here.</li>
            <li>Some data here.</li>
            <li>Some data here.</li>
        </ol>
        <!--No list style type unordered list -->
        <ul id="no-list-style-type">
            <li>Some data here.</li>
            <li>Some data here.</li>
            <li>Some data here.</li>
        </ul>
        <!--No list style type ordered list -->
        <ol id="no-list-style-type">
            <li>Some data here.</li>
            <li>Some data here.</li>
            <li>Some data here.</li>
        </ol>
    </body>
</html>

Output:







    
                                                                                

Post a Comment

Post a Comment (0)