HTML Bullet Points

University

Learn Frontend

HTML Bullet Points

Natalia Jackson

Contributed on

October 3, 2024

What Bullet Points Are in HTML

Bullet points in HTML help organize and present information in list form, making it easier for users to scan and digest content. They are useful for breaking down complex information into manageable, orderly chunks.

Types of HTML Lists

There are two main types of lists in HTML that can contain bullet points:

Unordered Lists (`<ul>`)

Unordered lists present a collection of items without a specific order. Each item is marked with a bullet point, the traditional marker.

Ordered Lists (`<ol>`)

Ordered lists are used when the order of the items is important. Each item is marked with numbers or letters to indicate its sequence.

Both types of lists use the <li> (List Item) tag to define individual items.

Importance and Benefits of Using Bullet Points in Web Content

Unordered Lists

Unordered lists are used to create lists without a particular sequence or numerical order. They can be customized using the list-style property in CSS.

Definition of Unordered Lists in HTML

An unordered list in HTML is a collection of items presented in no particular order, marked up with the <ul> tag. Each item is denoted by the <li> tag.

Creating an Unordered List

To create an unordered list, encapsulate multiple <li> elements within a <ul> tag.

Basic HTML Example`‍`

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

This code snippet will display a list of three items, each prefixed with a standard bullet point.

Customizing List Item Markers

Unordered lists can be styled using CSS. The list-style-type property allows customization of the bullet points.

Example of CSS Customization`‍`

ul {
    list-style-type: square; /* Changes bullet points to squares */
}

Applying CSS in HTML`‍`

<ul style="list-style-type: circle;">
    <li>Circle Item 1</li>
    <li>Circle Item 2</li>
    <li>Circle Item 3</li>
</ul>

This example sets the list item markers to circles. Other values include none (no marker), disc (default solid circle), square, or custom images with url('path/to/image').

Practical Applications

Unordered lists are used in various scenarios, including:

Creating menus or navigation bars.
Listing features or specifications of products.
Summarizing points in articles or presentations.

Examples of Unordered Lists with Different List Item Markers

Default Style (Disc)

Commonly used for traditional bulleted lists.

Square Markers

Offers a more angular, modern look.

Custom Image as Marker

Can be used to align with branding, such as using a small logo.

CSS for Custom Image Marker`‍`

ul.custom-marker {
    list-style-type: url('icon.png'); /* Uses an image as the list marker */
}

CSS List Properties

list-style-type: Changes the marker type of list items. Common values include disc, circle, square, decimal, lower-alpha, upper-alpha, and none.
list-style-position: Determines whether the list marker is inside or outside the content flow. inside places the marker inside the box, affecting text alignment. outside places it outside, aligned with the block's border.
list-style-image: Replaces the list marker with an image.

Styling Unordered and Ordered Lists

Styling Unordered Lists

ul {
    list-style-type: square; /* Changes markers to squares */
    list-style-position: inside; /* Aligns markers inside the text flow */
}

Styling Ordered Lists

ol {
    list-style-type: upper-roman; /* Uses Roman numerals for markers */
    list-style-position: outside; /* Keeps markers outside the text flow */
}

Using Images for List Markers

You can use images as list markers to add a custom touch to your lists:

ul.custom {
    list-style-image: url('path/to/your/image.png');
}

Example: Full HTML and CSS Integration

Here’s a complete example showing HTML integrated with CSS for list styling:

<!DOCTYPE html>
<html>
<head>
    <style>
        ul {
            list-style-type: circle; /* Circle markers */
            list-style-position: inside; /* Markers inside the list */
        }
        ol {
            list-style-type: lower-alpha; /* Lowercase letters */
            list-style-position: outside; /* Markers outside the list */
            padding-left: 20px; /* Adds padding for alignment */
        }
        .custom {
            list-style-image: url('icon.png'); /* Custom image marker */
        }
    </style>
</head>
<body>
    <ul>
        <li>First item in an unordered list</li>
        <li>Second item with a custom marker
            <ul class="custom">
                <li>Nested item with image as marker</li>
            </ul>
        </li>
    </ul>
    <ol>
        <li>First item in an ordered list</li>
        <li>Second item in an ordered list</li>
    </ol>
</body>
</html>