Unordered & Ordered Lists

<ul> and <ol> are the two list containers. <ul> is unordered: a collection of items where the sequence carries no meaning, a shopping list, a feature set, a group of options. <ol> is ordered: a sequence where position matters, recipe steps, a countdown, a numbered tutorial.

Both hold <li> elements and nothing else as direct children. An <li> can contain any block or inline content, including another nested list, so hierarchy comes naturally.

The choice between <ul> and <ol> is not cosmetic. Screen readers announce the kind of list before reading it. A numbered list primes the listener for a sequence; a bulleted list signals that the items are peers. Using <ol> for ingredients just because you like numbers tells the listener to expect a sequence where none exists.

Lists are also the right container for navigation menus, for any genuinely enumerable set, and for groups of related items that belong together conceptually. A list makes that structure visible to browsers, search engines, and assistive tech alike.

Write your items inside <li> tags, wrap them in <ul> or <ol>, and the browser renders bullets or numbers automatically. To change the marker style, reach for CSS list-style-type rather than switching the list element.

<ol> has three optional attributes that control the counter. start sets where counting begins, which is useful when one logical list is split across multiple sections of a page. reversed counts down instead of up. type switches the marker character: 1 for decimal (the default), a for lowercase letters, A for uppercase, i for lowercase roman numerals, I for uppercase roman. These are content attributes, not style, because the number itself carries meaning in a legal outline or a multi-part tutorial.