Bullet Types for HTML Lists
Adding a bulleted list to your website can be a good way of easily presenting sequential or non sequential information. In addition to the default style, both ordered and unordered HTML lists have several different bullet styles that you can use to better match the rest of your website.
Other People Are Reading
-
Ordered List Styles
-
The default bullet style for an ordered list is numbers. To use an alternative style, add the "type" attribute to the <ol> tag. Options for the "type" attribute are "A" to display uppercase letters, "a" to display lowercase letters, "I" to display uppercase Roman numerals and "i" to display lowercase Roman numerals. For example:
<ol type="A">
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ol>
Unordered List Styles
-
The default bullet style for an unordered list is a round black bullet. To use an alternative style, add the "type" attribute to the <ul> tag. Options for the "type" attribute are "circle" to display an unfilled circle and "square" to display black squares. For example:
<ul type="square">
<li>Cats</li>
<li>Dogs</li>
<li>Birds</li>
</ul>
-
Considerations
-
Using different bullet styles can add visual interest to your website and make it stand out from similar pages. On the other hand, using too many different bullet styles on the same page can make it look cluttered and confusing. Always test your HTML code before uploading the new page to your website to ensure it looks the way you want it.
Warning
-
The "type" attribute is considered deprecated for both the <ol> and the <ul> tags; although current browsers still support it, the attribute may become obsolete in the future and support for it may cease. W3Schools recommend using CSS rather than the "type" attribute to change the bullet style for lists; styling lists with CSS offers the additional benefit of being able to replace bullets with images.
-
