How to Make Bullet Points in HTML

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.

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

      Step

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

    • and
    • tags like so:

      Step

    • This is a bulleted point
    • This is another bullet point
    • Step

      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:

      Step

      • Bullet one
      • Bullet two

      Step

      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:

      Step

      #mylist li { font-style: italic; }

      Step

      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

      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:

      Step

      #mylist li {list-style: square;}