(left-sidebar)

Table of Content (toc)

Unordered (bulleted) lists in HTML are defined by the <ul> tag.

Unordered HTML Lists

Unordered (bulleted) lists in HTML are defined by the <ul> tag. 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>Unorganized HTML List</title>
</head>
<body>

    <h2>Unorganized HTML List</h2>

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

</body>

</html>

Run code

Unordered HTML List with a Marker for Each Item

The style of the list item marker is specified using the CSS list-style-type
property. Any of the following values may be present:
Value Description
disc Establishes a bullet as the list item marker (default)
circle Creates a circle for the list item marker.
square A square is set as the list item marker.
none The items on the list won’t be marked


Example : Disc

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

    <h2>A list with discs</h2>

    <ul style=“list-style-type:disc;”>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>  

</body>

</html>



Example : Circle

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

    <h2>A list with circle</h2>

    <ul style=“list-style-type:circle;”>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>  

</body>

</html>



Example : Square

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

    <h2>A list with square</h2>

    <ul style=“list-style-type:square;”>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>  

</body>

</html>

MR STAR CREATOR


Example : None

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

    <h2>A list with None</h2>

    <ul style=“list-style-type:none;”>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>  

</body>

</html>

MR STAR EDIT
Rate this post

Categorized in: