How to Make Bullet Points in HTML

Create bullet points in HTML using <li> and <ul> tags.

Using bullet points helps break up large chunks of text and point out lists of useful information. Bullet points are easy to create in word processing software, but when you are typing an HTML document, you need to know the code to create them. Not much code is required to create a bullet list. Wrap each list in

tags and then wrap the entire list in

Step 1

Write the text for your bullet points. Start each point on its own line. Wrap each line in

and

tags like so:

Video of the Day

This is a bulleted point

This is another bullet point

Step 2

Create a blank line above the bulleted list and then type an opening

tag on that line. Find the end of your bulleted list and then create another blank line there. Type a closing tag on that line. If you want to style the list with CSS later, then add a class or ID attribute to the opening

Bullet one
Bullet two

Step 3

Use "style" to create your bullet list using CSS code. Add CSS code between the tags between the and tags, or you can write the CSS code in an external .CSS file and embed the file using a tag like this: . Change "path/to/stylesheet.css" with the path to the .CSS file you create. Use the ID or class attribute to select your bullet lists, like so:

#mylist li { font-style: italic; }

The above code selects all

tags within a tag with an ID of "mylist." Replace the hash mark with a period when selecting by the class attribute.

Step 4

Use the "list-style" property in CSS to change the bullet type. The available bullet types include open circles, filled-in discs and squares for non-numbered, non-alphabetized lists. Here is an example for square bullets:

#mylist li {list-style: square;}

Video of the Day