Lists in HTML

Lists refer to collections of items and are one of the best ways to produce content in a structured format, we encounter lists on daily basis such as grocery shopping items, to-do lists, hotel menus etc.

Three types of lists are

Ordered list
Unordered list
Description list

Ordered list: <ol> is an HTML element that denotes an ordered list to sort the content in ascending or descending manner, by default items in <ol> will be presented in numerical.

<li> is an HTML element representing an item of lists, it must be contained inside a parent element such as <ol>: ordered list or <ul>: unordered list

<ol> has three attributes along with a global attribute

reversed: attribute accepts only boolean value like true or false, if the value is true then the item inside <ol> will be displayed in descending order

type: this represents the type of value that is to be used for numbering the item in lists

a - lowercase letter

A - uppercase letter

i - lower roman numerals

I - upper roman numerals

1 - integer

starting: specifies the starting count for numbering of the list, it accepts only integers even if the type is roman or letter format

for ex: if type = "A" and starting = 3 then lists numbering will start from C

 <ol class="starters"><h3>Starters </h3>
        <li> Honey Glazed onion rings</li>
        <li class="nonveg">Smoked chicken quesadilla</li>
        <li>Fried Calamari</li>
    </ol>

in below type will be declared as roman numerals in uppercase, similarly, we can change the type for particular item as inline attributete in <li> tag

<ol class="soups" type="I"> <h3> Soups </h3>
        <li class="nonveg">Thai Lime Prawn </li>
        <li class="veg">Cream of wild Mushroom</li>
        <li type="A">French Onion</li>
        <li class="vegan" type="a">Carrot Apply ginger</li>
        <li type="1">Potato Leek</li>
    </ol>

Unordered list:<ul> is an HTML element typically meant for an unordered list of items rendered as bullet points

we can change the type from bullet point to circle or square

<ul> <h3>Small Plates</h3>
        <li>Shrimp with pesto</li>
        <li>Crispy noodle pancakes</li>
        <li>Lamb with apricot sauce 
            <ol> <h4>Ingredients</h4>
                <li>Lamb</li>
                <li>Spicy Peanut</li>
                <li>Apricot sauce</li>
            </ol>
        </li>
    </ul>

whereas ingredients is an ordered list of items inside <ul> typically a nested tag

complete code here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lists</title>
</head>
<body>
    <p>We are going to Build hotel <b>XYZ</b> menu card using lists</p>
    <ol class="starters"><h3>Starters </h3>
        <li> Honey Glazed onion rings</li>
        <li class="nonveg">Smoked chicken quesadilla</li>
        <li>Fried Calamari</li>
    </ol>
    <ol class="soups" type="I"> <h3> Soups </h3>
        <li class="nonveg">Thai Lime Prawn </li>
        <li class="veg">Cream of wild Mushroom</li>
        <li type="A">French Onion</li>
        <li class="vegan" type="a">Carrot Apply ginger</li>
        <li type="1">Potato Leek</li>
    </ol>
    <ul> <h3>Small Plates</h3>
        <li>Shrimp with pesto</li>
        <li>Crispy noodle pancakes</li>
        <li>Lamb with apricot sauce 
            <ol> <h4>Ingredients</h4>
                <li>Lamb</li>
                <li>Spicy Peanut</li>
                <li>Apricot sauce</li>
            </ol>
        </li>
    </ul>
</body>
</html>

Descriptive list:<dl> is an HTML element used mainly when list of item to be displayed with descpription

<dl> <h3>Desserts</h3>
        <dt>Tres Leches Cake</dt>
        <dd>Strawberry compte , strawberry balsamic</dd>
        <dt>House Made Icecream</dt>
        <dd>Black rasberry</dd>
    </dl>

Goudham's Blog

Goudham's Blog

Lists in HTML