Information is rarely linear. When building feature sets or navigation menus, the unordered list provides the semantic foundation for grouping items where sequence doesn't matter.
1The Bullet Container
When items logically belong together but their specific order does not impact the meaningālike a list of product featuresāwe use the Unordered List. The <ul> tag acts as the parent container. Inside, every individual item must be wrapped in an <li> (List Item) tag.
Instead of numbers, browsers visually prefix <li> elements within a <ul> with bullet points (typically solid discs). This styling signals to the user that all items carry equal weight and can be read in any order. The <ul> provides structure without implying a strict sequence, allowing both browsers and screen readers to group related items effectively.
3Nesting and Visual Depth
Unordered lists can be nested inside one another to create multi-level hierarchies, such as dropdown menus or categorized feature sets. To properly nest a list, the child <ul> must be placed entirely *inside* an <li> element. Do not place a <ul> as a direct child of another <ul>.
Browsers automatically recognize this depth and will change the default bullet style (for example, from a solid disc to a hollow circle, and then to a square) to visually communicate the nested relationship to the user.
