How to Make Bullet Points in HTML

Techwalla may earn compensation through affiliate links in this story. Learn more about our affiliate and product review process here.
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
      or "unordered list" tags. You can then do anything you want with the bullet list using Cascading Style Sheet code.

  • Advertisement

    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
      tag. Here is an example of a short bullet list with an ID attribute:

    Advertisement

    • 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:

    Advertisement

    Advertisement

    #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.

  • Advertisement

    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

    Advertisement

    Advertisement

    references

    Report an Issue

    screenshot of the current page

    Screenshot loading...