How to Add Bullet Points in HTML?

Last Updated : 11 Oct, 2024

Bullet points in HTML make content easier to read and organize by creating lists. These lists help structure information clearly, with HTML providing tags for both ordered and unordered lists.

There are several ways to create bullet points in the HTML:

Table of Content

Using Unordered Lists
Using Ordered lists
Custom Bullet Points with CSS

Using Unordered Lists

Unordered lists are the most common way to create bullet points in the HTML. The <ul> tag can be defined as an unordered list and it is used in conjunction with the <li> (list item) tag to create each item in the list.

Syntax

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

Example: This is a basic HTML example that demonstrates how to create an unordered list using the <ul> and <li> tags.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Basic Unordered List Example</title>
</head>

<body>
    <h2>Basic Unordered List</h2>
    <ul>
        <li>Learn HTML</li>
        <li>Learn CSS</li>
        <li>Learn JavaScript</li>
    </ul>

</body>

</html>

Output

Using Ordered lists

Ordered lists are the <ol> tag, which stand for the order list. Althrough this tag can typically used for the numbered lists, we can apply the CSS to change the list style to look like bullet points.

Syntax

<ol style="list-style-type: disc;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Example: This is a basic HTML example that demonstrates how to create an ordered list using the <ol> and <li> tags, with numbered list items.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Ordered List</title>

</head>

<body>
    <h2>Baisc Ordered List </h2>
    <ol class="custom-bullets" type="1">
        <li>First Task</li>
        <li>Second Task</li>
        <li>Third Task</li>
    </ol>

</body>

</html>

Output

Custom Bullet Points with CSS

CSS can provides the options to customize the appearance of the bullet points in the unordered lists. We can change the shape, color, or even use the images as the bullets.

Syntax

<ul style="list-style-type: square; color: green;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Example: This is a simple HTML example that demonstrates how to create an unordered list using the <ul> and <li> tags.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Basic Unordered List Example</title>
</head>

<body>
    <h2>Basic Unordered List</h2>
    <ul>
        <li>Learn HTML</li>
        <li>Learn CSS</li>
        <li>Learn JavaScript</li>
    </ul>

</body>

</html>