Lists: ordered, unordered, and description lists
A surprising amount of real page content is genuinely list-shaped — features, steps, FAQ pairs — and HTML has three distinct list elements for three distinct shapes of list. Picking the right one, like headings in part 3, is about matching structure to actual meaning.
Unordered lists: <ul>, for items with no real sequence
<h3>Gift Subscription includes</h3>
<ul>
<li>One 12oz bag every month</li>
<li>A handwritten note on the first shipment</li>
<li>Free shipping within the US</li>
<li>Cancel anytime, no fee</li>
</ul><ul> (unordered list) is correct when the order of items doesn't matter — these four features of Bright Leaf Coffee's Gift Subscription could be listed in any order without losing meaning. By default, browsers render each <li> with a bullet point, but that's just the default styling — the actual meaning is "an unordered collection of related items."
Ordered lists: <ol>, when sequence is real information
<h3>Brewing the Ethiopian Light Roast</h3>
<ol>
<li>Grind 22g of coffee to a medium-coarse consistency</li>
<li>Heat water to 205°F</li>
<li>Bloom the grounds with 40g of water for 30 seconds</li>
<li>Pour the remaining water in slow, even circles over 3 minutes</li>
</ol><ol> (ordered list) is correct specifically when changing the order would change the meaning — brewing steps genuinely have to happen in sequence, unlike the feature list above. Browsers number <ol> items automatically by default; reordering the <li> elements in the HTML automatically renumbers them, which is also exactly why using <ol> for real steps (rather than manually typing "1.", "2.", "3." inside <p> tags) is worth the habit — the numbering stays correct even if a step gets added or removed later.
Description lists: <dl>, for real term-and-definition pairs
<dl>
<dt>How fresh is "fresh"?</dt>
<dd>Every bag ships within 24 hours of roasting, not from a warehouse.</dd>
<dt>Can I change my roast each month?</dt>
<dd>Yes — swap your selection anytime before the next billing cycle.</dd>
</dl><dl> (description list), with <dt> (term) and <dd> (description) pairs inside it, is the correct structure for genuine term-definition content — a real FAQ section, like the one above, or a glossary. It's the most under-used of the three list types, usually because a plain <h3>/<p> pairing looks similar by default — but <dl> carries real semantic meaning a screen reader or search engine can use that a generic heading-and-paragraph pairing doesn't.
Building a visual list using <p> tags with a manually typed bullet character (•) or number, instead of an actual list element. It can look identical to a real <ul> or <ol>, but a screen reader announces a real list's item count and position ("item 2 of 4") — information that's simply absent from a fake, manually-typed list, since there's no list structure in the markup for it to announce.
Nesting lists for real hierarchical content
<ul>
<li>
Subscriptions
<ul>
<li>Gift Subscription</li>
<li>Monthly Subscription</li>
</ul>
</li>
<li>Single bags</li>
</ul>Lists can nest inside a parent <li>, which is the correct way to represent genuinely hierarchical content — a category with sub-items, exactly like Bright Leaf Coffee's product categories above. The nested <ul> goes inside the parent item it belongs to, not as a sibling after it, which is what keeps the hierarchy structurally real rather than just visually indented.
Next: links and navigation — the <a> tag, the real difference between relative and absolute paths, and building Bright Leaf Coffee's actual site navigation.