Links and media · Lesson 3 of 8 · 7 minutes

Links and media: Current-page navigation

aria-current="page" identifies the active page within navigation without making the link disappear.

Open the lab Course map

Mastery 0/3Run itExplain itApply it

Current edit

PreviewNo external resources

Your objectives

Hints are always available. Wrong turns never cost XP.

1
Build current-page navigation
Build this first target: <nav> (aria-label="Course"); <a> inside <nav> (href="/web/") containing “Web”. Inspect the structure before checking the lesson.
Hint & worked example
aria-current="page" identifies the active page within navigation without making the link disappear.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<nav aria-label="Course"><a href="/web/">Web</a></nav>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.
2
Extend the current-page navigation example
Extend your file to include: <nav> (aria-label="Course"); <a> inside <nav> (href="/web/", aria-current="page") containing “Web”. Inspect the structure before checking the lesson.
Hint & worked example
aria-current="page" identifies the active page within navigation without making the link disappear.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<nav aria-label="Course"><a href="/web/" aria-current="page">Web</a></nav>
```
Common mistake to avoid: Replacing semantic elements with generic divs automatically improves accessibility.
3
Verify the complete current-page navigation pattern
Finish the pattern with: <nav> (aria-label="Course"); <a> inside <nav> (href="/web/", aria-current="page") containing “Web”; <a> inside <nav> (href="/unix/") containing “UNIX”. Inspect the structure before checking the lesson.
Hint & worked example
aria-current="page" identifies the active page within navigation without making the link disappear.
The requested elements, attributes, content, and hierarchy exist outside comments.
```
<nav aria-label="Course"><a href="/web/" aria-current="page">Web</a><a href="/unix/">UNIX</a></nav>
```
Common mistake to avoid: A visual appearance alone guarantees the intended HTML meaning.

Understand the pattern

aria-current="page" identifies the active page within navigation without making the link disappear.

Misconceptions to reject

A visual appearance alone guarantees the intended HTML meaning.
Replacing semantic elements with generic divs automatically improves accessibility.

The preview is a sanitized subset, not a full browser compatibility test.

Worked example and expected result

<nav aria-label="Course"><a href="/web/" aria-current="page">Web</a><a href="/unix/">UNIX</a></nav>

aria-current="page" identifies the active page within navigation without making the link disappear.

Try a variation

Adapt the final example to a different project name while retaining its structure and relationships. A different context still needs a real browser and accessibility check.

Explain it

Which statement correctly explains current-page navigation?A visual appearance alone guarantees the intended HTML meaning.Replacing semantic elements with generic divs automatically improves accessibility.aria-current="page" identifies the active page within navigation without making the link disappear.

Apply it elsewhere

You reuse current-page navigation in a different project. What must still be verified?Only whether the source code has the same number of lines.The meaning, relationships, and accessible names in the new document.Nothing; passing a single exercise guarantees every future use.

Keep the momentum.

Complete the lab, then explain and apply the pattern.

Next: Links and media: Images with useful alt text Try an incident drill

Anonymous lesson and mastery progress lasts for this session. Sign in to keep synced lesson XP between sessions; mastery stays device-local. No speed bonus, lost lives, or hint penalties.

Keep learning

MDN: HTML structure