The HTML <ul> element creates a bulleted list: a vertical group of items whose order is not essential. Browsers typically indent the items and place a filled circular bullet before each one. Put every item inside an <li> element, then wrap the group with opening <ul> and closing </ul> tags. section 9.2 section 9.7
A simple unordered list
Use a <ul> when rearranging the items would not change the meaning, such as a collection of mango varieties: <ul> <li>Francis</li> <li>Haden</li> <li>Honey</li> <li>Keitt</li> </ul> section 9.2 section 9.2
A useful way to build and adapt a <ul>:
- For short items, name each item clearly in a request for HTML code. section 9.2
- For longer items, begin each item with a dash or plus sign in the request so each becomes a separate list item; keep items scannable rather than several sentences long. section 9.2.1
- Nest another bulleted list inside an item to show multiple levels of information. Nested items display farther inward and commonly use hollow-circle bullets. section 9.2.2
- Customize bullets by requesting a circle, square, emoji, or Unicode character instead of the default filled circle. section 9.2.3
Use bullets for ingredients, feature collections, reading lists, and other groups that have no required sequence. Use a numbered list instead when readers must follow the items in order, such as recipe steps. section 9.1 section 9.7
When editing generated HTML, you can safely change the words inside a list item, but keep the <li> and </li> tags around that text. A recipe page can use separate bulleted lists for ingredient groups alongside a numbered list for instructions. section 9.4 section 9.6
<ul>
<li>Francis</li>
<li>Haden</li>
<li>Honey</li>
<li>Keitt</li>
<li>Kent</li>
<li>Tommy Atkins</li>
</ul>
Inspect a complete, copyable <ul> with six <li> elements to see the required opening and closing tags in context. section 9.2
