HTML

Lesson 04

Links and navigation

Use real links with clear names for navigation instead of clickable generic elements.

Good Code

nav.html
<nav aria-label="Primary">
  <!-- Real anchors preserve browser navigation behavior. -->
  <ul>
    <li><a href="/roadmaps/html">HTML roadmap</a></li>
    <li><a href="/review-examples">Review examples</a></li>
  </ul>
</nav>

Bad Code

nav.html
<div class="nav">
  <!-- Click handlers and vague labels break basic link expectations. -->
  <span onclick="go('/roadmaps/html')">Click here</span>
  <a href="#">More</a>
</div>

Review Notes

What to review

Good Code

The good version uses anchors for navigation, gives each destination a clear name, and wraps the group in a named navigation landmark.

Bad Code

The bad version hides navigation behind JavaScript and vague labels, making the links harder to open, copy, search, and understand.

Takeaways

  • If it takes the user somewhere, make it an anchor with a meaningful destination and label.