HTML Unordered Lists | HTML5 Tutorial

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.

One of the most critical and ubiquitous uses for the <ul> element is building site navigation. Because a menu is fundamentally just a non-sequential list of links, wrapping them in a <ul> inside a <nav> landmark is the global accessibility standard.

Developers then use CSS to strip away the default bullet points and align the list items horizontally. This creates a standard navigation bar while preserving the underlying semantic meaning. Screen readers will correctly announce a 'list of links' rather than a jumbled paragraph of clickable text.

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.

Introduction to Unordered Lists. When items logically belong together but their specific order does not impact the meaning—such as a list of product features, ingredients, or site links—we use the Unordered List. The <ul> element is the semantic container for non-sequential data sets. It provides structure without implying a strict sequence, allowing both browsers and screen readers to group related items effectively.

The Bullet Container. 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 Navigation Pattern. One of the most critical and ubiquitous uses for the <ul> element is building site navigation. Because a menu is fundamentally just a non-sequential list of links, wrapping them in a <ul> inside a <nav> landmark is the global accessibility standard. Developers then use CSS to strip away the default bullet points and align the list items horizontally to create a standard navigation bar.

Checkpoint: Choosing the correct structural tag informs assistive technologies about the nature of your data. Which tag is used to create a list where items are marked with bullets, indicating that the sequence of the items is not strictly important?

• →<ol> (Ordered List)
• →<ul> (Unordered List)
• →<list>

Nesting 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. Browsers automatically recognize this depth and will change the default bullet style (for example, from a solid disc to a hollow circle) to visually communicate the nested relationship to the user.

Checkpoint: It's important to separate visual appearance from semantic meaning. True or False? Even though we use CSS to hide the bullet points and arrange the links horizontally, an Unordered List (<ul>) remains the global accessibility standard and structural choice for building web navigation menus.

• →True
• →False (You should just use generic divs)

Checkpoint: HTML parsing rules enforce strict parent-child relationships for lists. Which specific tag MUST wrap every single item inside an unordered (or ordered) list for the HTML to be considered valid?

• →<item>
• →<li> (List Item)
• →<bullet>

List Style Types. While standard CSS is the modern way to style lists, HTML traditionally used the type attribute on <ul> to change the bullet style, and CSS now uses the list-style-type property. You can easily switch the marker from a 'disc' to a 'circle', a 'square', or remove it entirely with 'none'. Removing the marker is the crucial first step when converting a standard bulleted list into a navigation menu.

CSS Removal of Bullets. To build clean UI components like tag clouds or nav bars, we often need the semantics of a list without the visual noise of bullets. We use the CSS declaration list-style-type: none; applied to the <ul> element. This instantly hides all bullet markers for every <li> inside it. In professional codebases, this is one of the most frequently applied resets to list structures.

Checkpoint: When building a modern navigation bar, you must first eliminate the default list styling. Which exact CSS property and value pair accomplishes this?

• →bullets: none
• →list-style-type: none
• →text-decoration: none
• →marker: hidden

Using Icons as Bullets. Modern designs often replace standard bullets with custom SVG icons, emojis, or checkmarks. Rather than using the native list-style-image, developers typically remove the native bullet entirely and use CSS pseudo-elements (::before) to inject a custom icon perfectly aligned with the text. This gives you ultimate control over the size, color, and positioning of the custom list marker.

Unordered Lists Mastered. Unordered list mastery complete! You now have the perfect architectural tool for building navigation menus, feature sets, and grouped data where sequence does not dictate meaning. By combining <ul> and <li> tags, you provide clear relationships for screen readers and stable foundations for CSS styling.

Up Next: Visual Assets. With our text formatting and data organization techniques firmly established, it is time to bring your pages to life visually. In our next module, we will explore HTML Images—learning how to embed graphics, optimize them for performance, and ensure they are fully accessible to all users.

Build An Unordered List. <ul> holds a set of unordered <li> items.