Unordered lists in HTML
Summary
Unordered lists (<ul>) in HTML help organize information without implying a sequence. The list-style-type property in CSS allows customization of list markers like circles, squares, or none.
Introduction #
In Hypertext Markup Language (HTML), the unordered list (<ul>) is widely used to display collections of items where order does not matter or to present information without implying a sequence. Good examples for unordered lists are navigation menus, feature lists, or shopping lists.
For ordered lists, see the article on ordered lists (<ol>) in HTML.
This article will focus on unordered lists and explores how to style the list item (<li>) using different list item markers.
List of list item markers #
The list-style-type property in Cascading Style Sheets (CSS) allows you to modify the appearance of list markers.
These are the commonly used values:
disc- The default solid circle marker.circle- An open circle marker.square- A filled square marker.none- Removes markers completely.
disc marker #
The disc marker is the default style for unordered lists. It displays solid circular bullets.
<ul style="list-style-type: disc;">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
The list will be rendered as:
- Item One
- Item Two
- Item Three
circle marker #
The circle marker displays hollow circles instead of solid bullets.
<ul style="list-style-type: circle;">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
The list will be rendered as:
- Item One
- Item Two
- Item Three
square marker #
The square marker uses filled squares instead of circles.
<ul style="list-style-type: square;">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
The list will be rendered as:
- Item One
- Item Two
- Item Three
none marker #
The none marker removes bullet points from the list.
<ul style="list-style-type: none;">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
The list will be rendered as:
- Item One
- Item Two
- Item Three
Further readings #
Sources and recommended, further resources on the topic:
- WHATWG: ul element
- WHATWG: li element
- W3C: Accessibility - Using ol, ul and dl for lists or groups of links
- Ordered lists in HTML
Author
Jonas Jared Jacek (J15k)
Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/License
Unordered lists in HTML by Jonas Jared Jacek is licensed under CC BY-SA 4.0.
This license requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, for noncommercial purposes only. To give credit, provide a link back to the original source, the author, and the license e.g. like this:
<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/unordered-lists-in-html">Unordered lists in HTML</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>For more information see the Ditig legal page.
