left-sidebar

Web designers can organize a collection of connected things in lists using
HTML lists.

Table Of Content(toc)

Lists in HTML


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML list</title>
</head>
<body>

    <h2>Unorganized HTML List</h2>

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>  

    <h2>A HTML List with Order</h2>

    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol> 


</body>

</html>

Code Run

Unordered HTML List

With the <ul> tag, an unordered list is introduced. The <li> tag
appears at the top of each list item.

By default, the list items will be denoted with bullets (small black circles):


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML list</title>
</head>
<body>

    <h2>Unorganized HTML List</h2>

    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>  
</body>

</html>

Code Run

Ordered HTML List

The <ol> tag indicates that the list is ordered. The <li> tag
appears at the top of each list item.

The list elements will by default have numbers next to them:


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML list</title>
</head>
<body>

    <h2>A HTML List with Order</h2>

    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol> 


</body>

</html>

Run Code

MR STAR CREATOR

Lists of HTML descriptions

Also supported by HTML are description lists.

Term descriptions are included in a description list, which is a list of
terms.

The terms (names) are defined by the <dt> tag, the dl> tag specifies
the description list, and the <dd> tag explains each term:


Preview:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML list</title>
</head>
<body>

    <h2>A Description List</h2>

    <dl>
        <dt>Milk</dt>
        <dd>– white cold beverage</dd>
        <dt>Coffee</dt>
        <dd>– black hot beverage</dd>
    </dl>

</body>

</html>
MR STAR EDIT
Rate this post

Categorized in: