HTML & CSS Practice 2/12

Links and lists: what a list actually is

A link is a tag with an address on it: <a href="https://example.com">Example</a>. The href is the address. Drop it and you still have an <a>, but it is no longer a link - nothing to click, nothing to follow, and a screen reader will not announce it as one.

Lists are where people go wrong. This page has three bookmarks typed as three paragraphs, each starting with a dash. It looks like a list. It is three unrelated paragraphs that happen to begin with a hyphen.

<ul> makes it a real one. <ul> opens the list, each <li> is one item, and now the browser knows the three belong together. A screen reader announces "list, 3 items", and its user can skip the whole group with one key. Typed dashes say none of that: the screen reader finds three paragraphs, reads them one at a time, and never mentions that they are related.

The bullets you get for free are not the point. Switch them off in CSS and it is still a list, because the structure was never the bullet.

Your task: turn the three bookmark paragraphs into one <ul> with three <li> items, dropping the typed dashes - the browser draws its own bullets. Then make the MDN item a link to https://developer.mozilla.org.

You'll practice:

Writing an <a> with an href so its text actually goes somewhere
Picking a tag for what the content is, not for how it looks

<h1>Bookmarks</h1>
<p>Three places I keep going back to when I get stuck.</p>
<p>- MDN Web Docs</p>
<p>- The HTML spec</p>
<p>- Can I Use</p>