- Use an anchor with href when the user navigates to a resource or location.
- Use a button when the user performs an action, such as opening a dialog, submitting a form or toggling a control.
Correct Navigation Example
<a href="/courses/">Browse Courses</a>Correct Action Example
<button type="button">Open Course Details</button>The button example needs JavaScript or another suitable implementation to perform an action. Do not use a button styled as a link merely to navigate to another page when an anchor is appropriate.
18. Common Link Mistakes
Mistake 1: Missing href
<a>Visit Course</a>Without href, the anchor is not an ordinary hyperlink. Provide a valid destination when navigation is intended.
Mistake 2: Incorrect Relative Path
<!-- Current page: /courses/html.html -->
<a href="about.html">About</a>This resolves to /courses/about.html, not /about.html. If the intended destination is /about.html, use an appropriate path such as ../about.html or /about.html.
Mistake 3: Missing Fragment Target
<a href="#registration">Registration</a>
<!-- No element with id="registration" exists -->Ensure that the target element exists and its ID matches the fragment.
Mistake 4: Duplicate IDs
<h2 id="details">Course Details</h2>
<h2 id="details">Contact Details</h2>IDs should be unique within the document. Use a different ID for each target.
Mistake 5: Using a Placeholder Destination
<a href="#">Learn More</a>A hash-only link generally targets the top of the current document. It is not a substitute for a real destination or a button action.
Mistake 6: Assuming Every Relative Link Is Domain-Rooted
<a href="courses/html.html">HTML Course</a>