How to create lists in HTML and control the way they look

Choosing the Right List Type

When you begin designing a page, the first question is: what purpose does the list serve? A grocery list, a step‑by‑step recipe, or a glossary of terms each has a distinct visual cue that informs the reader about the information hierarchy. The core HTML tags that give meaning to these structures are <ul> for unordered lists, <ol> for ordered lists, and <dl> for definition lists. Picking the correct tag does more than look right; it signals to browsers, screen readers, and search engines that the content is a list.

If the items are independent and share no inherent order - think a list of toppings or a set of features - the unordered list is the natural fit. Each <li> element receives a bullet or a custom marker, and the browser knows to present the group as a set. When a sequential flow or ranking is needed - such as a numbered list of steps or a priority list - the ordered list becomes the tool of choice. Browsers automatically number the <li> elements, which provides clarity for readers and assistive technology alike.

A definition list pairs a term with its explanation. Inside <dl>, each <dt> represents a term while <dd> holds the definition. This pairing is perfect for glossaries, FAQs, or any scenario where a concept is followed by its description. The semantic markup tells the screen reader to announce the term before the definition, creating a natural reading experience.

Semantic correctness also plays a role in SEO. Search engines parse these tags to understand content structure, and proper use can help with ranking for list‑related queries. For example, a properly marked ordered list of benefits can appear as a featured snippet when a user searches for “steps to improve productivity.” Thus, choosing the right list type directly influences discoverability.

Before writing the markup, sketch the list hierarchy. If you foresee nesting - for instance, a submenu under a navigation item - plan the depth so that the HTML can accommodate <ul> inside other <li> elements. Nested structures keep markup clean and enable straightforward styling with CSS. This forward planning reduces the need for later restructuring.

In summary, begin with the content’s logical order. Pick <ul> for unordered items, <ol> for numbered sequences, or <dl> for term‑definition pairs. The chosen tag sets the foundation for accessibility, SEO, and visual styling, so take the time to decide at the outset.

Building a Basic List Structure

Once the list type is selected, the next step is to create the markup skeleton. For an unordered list, start with the container tag and add a list item for each entry. A typical structure looks like this:

Ordered lists mirror the same approach, swapping <ul> for <ol> to generate automatic numbering. Definition lists use <dl> as the container, with <dt> for the term and <dd> for its description:

When nesting, place a list inside a list item. For example, a dropdown menu might contain a second‑level unordered list:

This nested structure keeps the markup clean and semantically correct. Each level can be targeted individually in CSS for indentation, font size, or color. By building a solid foundation, you avoid later rework when styling demands change.

Another benefit of a well‑structured list is maintainability. If you need to reorder items, simply move the <li> elements, and the browser updates the visual order automatically for unordered lists or numbering for ordered lists. This reduces the risk of errors that can creep in when text or HTML fragments are rearranged manually.

When creating lists, also consider the content’s length. Long items can wrap across multiple lines; ensuring consistent line spacing and padding in CSS will maintain readability. If items vary significantly in length, you may want to wrap them in a <span> for precise control, though this should be done sparingly to preserve semantics.

Customizing List Appearance with CSS

With the HTML structure in place, CSS steps in to shape the visual experience. The first rule of thumb is to keep the list's core semantics intact - avoid removing the ul or ol tags - while altering the appearance. To change bullet styles, the list-style-type property offers a range of options such as disc, circle, square, or none for no marker.

For ordered lists, list-style-type can switch between numbers, lowercase or uppercase letters, Roman numerals, or even custom images. For example, list-style-type: lower-alpha; turns the list into alphabetical markers, while list-style-image: url('bullet.png'); replaces the default bullet with a graphic. Using images as markers demands careful attention to file size; compressing the image or using SVG ensures fast loading.

Positioning bullets or numbers relative to the list text is controlled via list-style-position. Setting it to inside places the marker inside the content box, aligning the text flush with the marker. outside places the marker to the left of the content box, which is the default for most browsers. Adjusting margin-left and padding-left on the list container can fine‑tune the spacing, especially for nested lists where indentation matters.

To style individual items without affecting the whole list, the ::marker pseudo‑element provides targeted control. Applying color: #4a90e2; to ul::marker changes the bullet color across all list items. You can even set font-size or font-weight on the marker to differentiate it from the text. This level of precision is useful when creating visually striking lists that maintain readability.

For a more dynamic approach, CSS variables (custom properties) can store common values such as marker color, indentation, or font family. Defining --marker-color: #2a9d8f; at the root and using color: var(--marker-color); on ::marker keeps your styles consistent and easy to change across the entire project.

When designing for responsive layouts, media queries adjust list styles at breakpoints. On small screens, you might switch an unordered list from horizontal to vertical layout by changing display: flex; to display: block; and resetting margin-left. Also, reducing font-size or line-height improves legibility on mobile devices. By combining these CSS techniques, you maintain a cohesive look while ensuring the list adapts to various devices.

Removing Default List Styles

Sometimes the default bullets or numbers feel out of place with a design that leans toward minimalism or flat UI. In those cases, the easiest route is to strip the list markers by setting list-style: none; on the container. Once the markers are gone, you can add custom separators using pseudo‑elements.

For example, inserting a vertical bar after each list item creates a sleek navigation menu. Use ::after on li elements, like this: li::after { content: '|'; padding: 0 10px; }. This approach keeps the structure semantic while allowing creative styling. Remember to hide the separator on the last item with li:last-child::after { content: ''; } to avoid an extra bar at the end.

Another technique involves replacing bullets with icons. The ::before pseudo‑element can host an inline SVG or an icon font character. For instance, li::before { content: '\\2022'; color: #ff5722; margin-right: 8px; } changes the bullet to a red dot. Icon fonts or SVGs give you precise control over size, color, and hover effects without sacrificing accessibility.

When you need a separator that looks like a bullet but with custom spacing, li::before { content: '•'; font-size: 1.2em; margin-right: 0.5em; } achieves a balanced appearance. This method also works well for definition lists: apply ::before to dt elements to indicate key terms.

In more complex designs, a list can act as a timeline or progress tracker. Removing the default markers allows you to place a styled circle or icon at each step. Using position: relative; on li and position: absolute; on ::before creates overlayed markers that align precisely with the content.

Always test the custom markers across browsers. Some older browsers may not support ::marker, so fallback methods like ::before or ::after ensure compatibility. Using semantic tags and ARIA roles remains essential for accessibility, even when the visual markers are removed.

Accessibility Considerations

Lists are a cornerstone of accessible markup. Screen readers announce them as a group, allowing users to navigate between items quickly. By keeping the native list tags, you preserve that structure. Avoid replacing a list with a series of <div> or <span> elements, which lose the implicit list semantics and confuse assistive technology.

When adding custom markers via pseudo‑elements, include appropriate ARIA labels or aria-label attributes on the container. For instance, <ul aria-label="Feature list"> informs users that the list contains feature items. The aria-label should be concise and descriptive.

Keyboard navigation remains essential. Test that Tab moves through list items logically. If you use display: flex; on a list, ensure each li remains focusable or has an interactive element like a link. Use role="list" and role="listitem" sparingly, only when the semantic tags are insufficient.

For definition lists, screen readers announce <dt> followed by <dd>. When custom styling hides the <dt> visually, keep it in the DOM to preserve meaning. If you need to change its appearance, use visibility: hidden; instead of display: none;, so the element remains accessible but invisible.

Responsive design can inadvertently break accessibility. When lists collapse into single‑column layouts or become inline menus, test with a screen reader to ensure the order remains logical. Use order in CSS Flexbox to rearrange visual order without altering the DOM order, which could confuse users relying on the native sequence.

Finally, consider contrast ratios. The color of list markers or separators should meet WCAG AA contrast requirements against the background. If you use an icon as a marker, choose a color that is distinguishable from surrounding text. By integrating these accessibility checks early, you avoid costly redesigns later.

Real-World Example: Navigation Menu

A navigation bar often relies on an unordered list wrapped in a <nav> element for semantic meaning. Each li contains a link. The overall structure is:

Flexbox distributes the items evenly across the horizontal axis: display: flex; justify-content: space-between;. The flex-grow property can make the items stretch to fill the available space if needed. This layout ensures the navigation is responsive and the links are evenly spaced on larger screens.

Hover and focus states improve user feedback. Define a:hover, a:focus { color: #e63946; } to change the link color when interacted with. For mobile devices, use touch-action: manipulation; to reduce delay on tap. The outline: none; should be avoided unless you provide an alternative focus indicator, such as a subtle box shadow.

Dropdown menus appear when a parent li contains a nested <ul>. Position the submenu with position: absolute; left: 0; top: 100%; and hide it initially: display: none;. When the parent is hovered or focused, set display: block; to reveal the submenu. Add a smooth transition: transition: opacity 0.2s ease-in-out; and manage opacity for a fade‑in effect.

Keyboard accessibility demands that dropdown menus can be opened with the Enter or Space key. Use role="menu" on the submenu and role="menuitem" on each link. When the submenu opens, focus should shift to the first item, allowing screen reader users to navigate the nested options.

For large menus, consider collapsible sections using the <details> element. The <summary> element provides a clickable header, and the <ul> inside <details> holds the list items. This native HTML structure ensures accessibility without additional JavaScript.

Testing the navigation across devices is essential. On tablets, the touch area for each link should be at least 44px by 44px to meet mobile usability guidelines. Use padding and margin to enlarge the hit area without changing the visual layout.

Testing and Validation

Before the page goes live, run a full validation cycle. The W3C HTML validator will catch missing closing tags, improper nesting, and stray attributes. Paste your markup into https://validator.w3.org/ and review the report for warnings that could affect rendering or accessibility.

Next, evaluate accessibility with tools like Lighthouse or axe-core. Lighthouse provides a score for accessibility, best practices, and performance. Pay attention to list‑related issues: missing role attributes, low contrast markers, or broken keyboard navigation. Fix any failures before moving forward.

Cross‑browser testing ensures that the list renders consistently across Chrome, Firefox, Safari, Edge, and mobile browsers. Use developer tools to emulate different screen sizes and check how the list behaves at breakpoints. Pay particular attention to the behavior of ::marker and list-style-image, which can behave differently on older browsers.

Responsive design validation involves resizing the viewport or using a tool like BrowserStack. Verify that the list remains legible, that bullets or separators stay aligned, and that nested lists collapse gracefully. If the list becomes too narrow, consider stacking the items vertically or converting the navigation to a hamburger menu on smaller screens.

Performance testing is critical when using custom marker images. Tools like WebPageTest can measure the impact of image sizes on page load times. Compress images, use SVG for vector markers, or switch to icon fonts to reduce payload. Ensure that the list loads quickly, especially on mobile networks.

After addressing all validation results, perform a final user‑testing session. Invite a few participants to read the list content, navigate through nested items, and report any confusing elements. Observing real users often uncovers usability issues that automated tests miss.

What to Do Next

Apply the concepts learned by building a simple list on a test page. Start with a basic unordered list of three items. Add a CSS rule that changes the marker to a custom icon, and then extend the list to include a nested unordered list. Experiment with ::marker and ::before to style the markers. Test the list in at least two browsers and on both desktop and mobile devices.

Afterward, replace the list with an ordered list and see how numbering behaves. Try adding counter-reset and counter-increment to create custom numbering styles. Compare the results with the default numbering to understand the flexibility offered by CSS counters.

For a more ambitious project, build a navigation menu that collapses into a hamburger icon on small screens. Use the techniques described in the navigation example to manage hover, focus, and keyboard interactions. Validate the final markup and run accessibility checks to ensure the menu is usable by everyone.

Finally, document the process in a short guide or internal wiki page. Share the best practices for choosing list types, styling markers, and maintaining accessibility. By keeping these resources handy, future projects can start off on the right foot, saving time and preventing common pitfalls.