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.
See Also: HTML Image And Text Side By Side: Design Techniques Explained
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.
See Also: HTML Tags And Attributes: A Comprehensive Reference Guide
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.
See Also: HTML Tags List With Examples: A Comprehensive Guide For Beginners
