How to Add Bullet Points in HTML? Last Updated : 11 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 ContentUsing Unordered ListsUsing Ordered listsCustom Bullet Points with CSSUsing Unordered ListsUnordered 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> OutputUsing Unordered ListsUsing Ordered listsOrdered 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> OutputUsing Ordered listsCustom Bullet Points with CSSCSS 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> OutputCustom Bullet Points with CSS Comment More infoAdvertise with us Next Article How to Add Bullet Points in HTML? M maheshkadambala Follow Improve Article Tags : HTML Similar Reads How to Add Symbols in HTML? Symbols in HTML are important for conveying special characters, such as copyright, currency symbols, and arrows, which enhance content clarity and visual appeal. We will explore two different approaches to adding symbols in HTML.Below are the possible approaches: Table of ContentAdd Symbols using HT 2 min read How to create an image bullets in HTML ? In HTML, there are two types of lists: ordered and unordered. Ordered lists are numbered with alphabet letters or Roman numerals, while unordered lists use dots. Sometimes, you may want to replace these bullets with an image to enhance the visual appeal of your web content. To get this, we can use t 2 min read How to Remove Bullet Points in CSS? Bullet points are commonly used in HTML to create unordered lists. They can provide a visual indication of each list item. However, there might be scenarios where you want to remove these bullet points for styling purposes, such as creating a cleaner look for the menu or a custom design. There are s 3 min read How to add horizontal line in HTML ? Creating a visually appealing and well-structured webpage often involves the use of horizontal lines. These lines help separate different sections of content, making it easier for users to read and understand the information presented. In this guide, we’ll explore two effective methods to add horizo 2 min read How to define a list item in HTML5? To define a list in HTML5 we can use the HTML <li> tag. But there are two types of listing in HTML. One is an ordered list and another one is an unordered list. For ordered we can use HTML <ol> tag and for the unordered list, we will use the HTML <ul> tag. Also, we can change the l 2 min read How to create space between list bullets and text in HTML ? The approach of this article is to create a space between bullets and the text using CSS. This task can be done by using the CSS padding-left property. It is used to set the width of the padding area on the left of an element. Syntax: padding-left: length|percentage|initial|inherit; Example: HTML 1 min read How to display long quotations in HTML ? In this article, we will discuss the tag that will display long quotations. The <blockquote> tag in HTML is used to display long quotations (a section that is quoted from another source). It changes the alignment to make it unique from others. It contains both opening and closing tags. In the 2 min read How to Create an Unordered List in HTML ? An unordered list in HTML is a collection of items displayed with bullet points. To create an unordered list, we can use the <ul> tag to start the list and <li> tags for each items. Unordered lists are usually displayed with bullet points. Syntax<ul> <li>apple</li> < 1 min read How to Insert Bullet Points in Excel: Quick and Top Ways Adding bullet points in Excel can make your data more organized and visually appealing, perfect for lists, notes, or presentations. Unlike word processors, Excel doesn’t have a built-in bullet button, but there are simple workarounds to achieve the same effect. This guide will walk you through easy 7 min read How to Build a Website using HTML? Building a website using HTML (Hypertext Markup Language) is the foundation of web development. HTML allows you to structure content, define headings, paragraphs, lists, and links, and create visually appealing web pages.In this article, we'll learn the fundamentals of How to build a Website using H 5 min read Like