Build Useful Links and Navigation
Connect pages with clear link text and valid destinations.
By BizAIPro Learning · Prerequisites: Create Your First HTML Document
What you will learn
- Create a link with href
- Group primary links in navigation
- Choose text that explains a destination
A link is a destination
The anchor element creates a link when it has an href. A relative path such as /learn/ refers to this website, while an HTTPS URL can refer to another website. A fragment such as #contact refers to an element with that id. Use actual destinations; a button that changes the current interface is a different control.
Make the text useful
Visitors may scan a list of links without the surrounding paragraphs. “Read the HTML course” communicates more than “click here.” Avoid placing a complete paragraph inside a link when one specific action is enough. Links should remain identifiable without relying only on color.
Group related navigation
Use nav for a meaningful navigation group, not every small collection of links. When there is more than one navigation region, an accessible label can distinguish them. A list inside nav makes the relationship clear. The current page can use aria-current="page" when appropriate.
Verify the route
Run the example and inspect its link text. This learning preview blocks navigation and remote requests to keep code isolated; verify real routes in your own project before publication. A well-formed href alone does not prove the destination exists. Review the final page URL, redirects and access requirements.
Read the example
<nav aria-label="Learning"><ul> <li><a href="/learn/">Learning hub</a></li> <li><a href="/learn/html/">HTML course</a></li> </ul></nav>
Line-by-line explanation
- nav identifies a navigation group.
- aria-label distinguishes this group.
- href gives the destination; the text explains it.
Expected output
A labelled navigation region with two descriptive links.
Common mistakes to avoid
- Using empty href values as placeholders
- Writing identical vague link text for different destinations
- Using an anchor for an action that should be a button
Make a change. See what happens.
HTML/CSS renders in a script-free preview. JavaScript runs in a separate, time-limited console worker with network access blocked. DOM scripting and package imports are not supported. Browser memory limits still depend on your device.
Page preview
Render your code to see the page.
Link to your learning hub
Create a nav with aria-label="Learning" and a link to /learn/ whose text is Learning hub.
Which attribute supplies a link destination?
Summary & next step
- Can you now create a link with href?
- Can you now group primary links in navigation?
- Can you now choose text that explains a destination?
Complete the exercise and pass the knowledge check to complete this lesson. Guest progress stays on this browser and does not sync across devices.