How to Make Bullet Points in HTML

By Sara Williams

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.

      Step 1

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

    • and
    • tags like so:
    • 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:
        • Bullet one
        • Bullet two

      Step 3

      Use "style" to create your bullet list using CSS code. Add CSS code between the

      tags between theandtags, or you can write the CSS code in an external .CSS file and embed the file using atag 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;}

      Tips & Warnings

      • Use the
          tag instead of
            to create ordered lists. You can then set "list-style" type to varying types of numbers or letters.
      • Create image bullets by specifying "none" for the "list-style" attribute and then give every
      • tag a non-repeating, left-aligned background image. Add padding to the left-hand side of each
      • tag to move the text over, otherwise it will overlap the image.