How to do bullet points in HTML?

Photo by Valery Sysoev on Unsplash

Creating bullet points in HTML is easy! Here are three ways to achieve it:

1. Using the ul and li tags:

This is the most common and semantic way to create bullet points. The ul tag stands for "unordered list", and each list item within it is wrapped in an li tag (list item).

HTML

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

This will render three bulleted items on your page. You can customize the bullet style by applying CSS to the ul tag.

2. Using the ol and li tags:

If you want numbered points instead of bullets, use the ol tag (ordered list) instead of ul. The list items will be numbered automatically (1, 2, 3...).

HTML

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

3. Using the CSS list-style-type property:

You can also directly control the bullet style on any list item using the list-style-type property in CSS. This allows you to choose different bullet shapes or even remove them completely.

For example, to use square bullets instead of default circles:

CSS

ul {
  list-style-type: square;
}

Remember, accessibility is important. Ensure your page uses semantic tags like ul and ol whenever possible to provide clear meaning for screen readers and other assistive technologies.

Feel free to ask if you have any further questions about HTML or CSS!