How To Add Bullet Points In HTML? Step-By-Step Guide

While working with HTML, there are some basic things that every developer uses to date. These basic things, like bullet points, are crucial in every website. In this article, we will learn how to add bullet points in HTML and discuss its uses in detail.

Moreover, there are three methods to answer the question, “How do you add bullet points in HTML?”:

Using the <ul> tag.
Using the <li> tag
Applying the type attribute.

There are various HTML tags and attributes, but we will discuss these tags in detail. Furthermore, before knowing about bullet points, we should first know the types of

Ordered Lists- The list is generally defined by <ol> tag. Inside the <ol> tag, a list item tag that is <li> is also used in this list. Additionally, an ordered list is used when you want to follow a sequence or an order—for example, creating a step-by-step list.

Description Lists- This list is generally defined by <dl> tag. Inside the <dl> tag, two types of tags are used that are <dt> and <dd>. Moreover, the <dd> tag relates to the word written inside the <dt> tag.

Table of Contents

3 Ways to Add Bullet Points in HTML

There are three ways how to add bullet points in code that we will discuss in detail. For instance:

Method 1: Using the <ul> Tag.
Method 2: Using the <li> Tag.

Method 3: Using the type Attribute.

Method 1: Using the <ul> Tag

An unordered list is used when you don’t want to follow an order or a sequence—for example, creating a to-do list. Furthermore, you should use the <ul> tag with <li> tag.

Example

For instance:

<ul>

<li>Mango</li>

<li>Apple</li>

<li>Pineapple</li>

</ul>

Method 2: Using the <li> Tag

Another solution for how to add bullet points in HTML would be using the <li> tag. Furthermore, the <li> tag must be used under a <ul> tag or a <menu> tag if you want to add bullet points in HTML.

Without adding bullet points, the <li> tag is the most important.

Example

<menu>

<li>Cricket</li>

<li>Football</li>

<li>Basketball</li>

</menu>

Another example for <li> tag could undoubtedly be:

<ul>

<li>Table</li>

<li>Chair</li>

<li>Blackboard</li>

</ul>

This is another way how to add bullet points in HTML using <li> tag.

Method 3: Using the type Attribute

The last solution for adding bullet points in HTML is using the type attribute. Moreover, the type attribute determines how your bullet looks on the page.

You can use three types of type attributes. For instance:

Disc- You can use this to show your bullets as small black circles.
Circle- You can use this to establish your bullet as a circle.
Square- This mainly portrays your bullet as a square.

Additionally, the type attribute should be written inside the <ul> tag, <ol> tag, or the <menu> tag of the specific <li>tag.

Example

For instance, if you want your bullet to look like a circle, you can write:

<ul type=”circle”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

Additionally, if you want your bullets to look like a square, you can write:

<ul type=”square”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

This is the last way how to add Bullet Points in HTML using the type attribute.

FAQs

How do you encode bullet points in HTML?

What are bullets and numbering in HTML?

In HTML, bullets and numbering lists can be made generally with the help of unordered and ordered lists.

What is the default bullet style in HTML?

The disc bullet style is generally the default style in HTML.

How do you remove bullets from UL?

You can use the type attribute 'none' to eliminate bullets from Unordered Lists.

Conclusion

In conclusion, we learned how to add bullet points in HTML. These are the only methods you will surely need to add bullet points in HTML. Moreover, the <ul> tag is mainly used, but you can also try other tags.

You can also use nested lists with the help of <li> and <ul> tags. Not to mention, but always remember to use <li> tag with a parent component; otherwise, it will not show bullet points.

You can also practice various HTML tag lists with detailed examples through which you can do new things like adding the current time in HTML, making a color picker, and much more.

Geoff Graham

Hi, I’m Geoff. I design. I develop. I do lots of things in between. What that really boils down to is that I make websites.

HTML

How To Add Bullet Points In HTML? Step-By-Step Guide