Ul element
The HTML ul element represents a collection of related list items without inherent sequential ordering, typically displayed with bullet markers.
Build a Website with ChatGPT
An unordered list is the HTML ul element containing list items whose order is not semantically essential, typically displayed with bullets.
- How it is used
- Organizes unordered page content such as recipe ingredients into readable bulleted groups.
- How deep it goes
- Defines <ul> and <li>, then demonstrates long items, nesting, and bullet customization without detailing browser implementation.
- Examples
- Uses mango varieties, annotated poetry titles, a nested grocery list, and recipe ingredient lists.
- What you can do after
- Apply it via ChatGPT prompts to generate, nest, and customize bulleted HTML lists.
Web Design Playground
A list format that presents items as separate entries marked with bullet symbols.
- How it is used
- Organizes related items when their order is not numeric, including tasks, groceries, traits, prerequisites, and navigation links.
- How deep it goes
- Defines the ul and li structure, browser rendering, and bullet styling, but does not detail advanced list nesting.
- Examples
- Uses to-do lists, grocery lists, object traits, course prerequisites, navigation links, and word-formation items.
- What you can do after
- Build bulleted lists by combining a ul container with repeated li elements and adjust bullet styles with CSS.
Web Design Playground, Second Edition
An unordered list is an HTML list whose items have no inherent numeric order and are typically displayed with bullet markers.
- How it is used
- Organizes related items that do not need numeric ordering, including to-do lists, groceries, traits, and prerequisites.
- How deep it goes
- Defines the ul/li structure, browser output, default bullets, indentation, and CSS bullet-style changes.
- Examples
- Uses to-do lists, grocery lists, object traits, course prerequisites, and a basic HTML list.
- What you can do after
- Build unordered lists from scratch with ul and li elements, then adjust bullet shapes with CSS.
Read how Web Design Playground, Second Edition explains ul element →
Related concepts
- listkind of · An HTML list is a structure that groups related items as an ordered or unordered sequence.
- list item elementuses · An HTML <li> element represents a single item in an ordered or unordered list.
- ol elementcontrasts with · The HTML ol element represents an ordered list whose items are presented in a meaningful sequential order, typically with numbered markers.
- flexboxuses · Flexbox is a CSS one-dimensional layout model for arranging, sizing, aligning, and distributing items along a row or column.
- margin propertyused by · The CSS margin property specifies the outer space around an element’s border, separating it from neighboring content.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.