Understand how to create functional hyperlinks in HTML, distinguish between navigation links and interactive buttons, and recognize common link types for accessible web design.
What it is
A hyperlink (or anchor) is a reference that allows users to navigate from one document or resource to another. In HTML, the <a> element defines this connection using the href attribute. The mental model is simple: if clicking an element changes the URL or loads new content, it is likely a link. If it triggers a JavaScript action without changing the page state, it is likely a button.
Related terms include "anchor text" (the visible clickable text), "URI/URL" (the destination address), and "target" (where the linked document opens).
Why it matters
- Navigation: Links are the primary mechanism for moving through websites and the broader internet.
- Accessibility: Screen readers announce links differently than buttons, helping users understand what will happen when they activate the element.
- SEO: Search engines use links to discover new pages and determine the relevance of content.
- User Expectation: Users expect underlined text or distinct colors to indicate clickable links, reducing cognitive load.
Syntax or steps
The basic syntax requires an opening tag with an href attribute, the anchor text, and a closing tag.
<a href="destination-url">Visible Text</a>Key attributes include:
href: Specifies the link target (required for valid navigation).target="_blank": Opens the link in a new tab/window.rel="noopener noreferrer": Security best practice when usingtarget="_blank".
Example
This example demonstrates three common link scenarios: internal navigation, external navigation, and email contact.
<p>
<!-- Internal Link -->
<a href="/about.html">Learn About Us</a>
</p>
<p>
<!-- External Link with Security Attributes -->
<a href="https://www.mozilla.org"
target="_blank"
rel="noopener noreferrer">
Visit Mozilla
</a>
</p>
<p>
<!-- Email Link -->
<a href="mailto:support@example.com">Email Support</a>
</p>Explanation: The first link navigates within the same site. The second opens an external site in a new tab while preventing security vulnerabilities via rel. The third triggers the user's default email client.
Common mistakes
- Using
<a>for actions: Do not use emptyhref="#"links for JavaScript-only interactions. Use<button>instead. - Vague Anchor Text: Avoid "Click here." Use descriptive text like "Download PDF Report" so screen reader users know the destination.
- Missing Protocol: Always include
http://orhttps://for external links to ensure correct resolution. - Nested Interactive Elements: Never place a
<button>inside an<a>tag; this creates invalid HTML and unpredictable behavior.
When to use it
Choose between <a> and <button> based on intent.
| Element | Use When... | Keyboard Behavior |
|---|---|---|
<a> |
Navigating to a new page, section, or external resource. | Enter key activates; Tab moves focus. |
<button> |
Triggering an event (submit form, open modal, toggle UI). | Enter and Space keys activate; Tab moves focus. |
Practice
Guided Exercise: Create a link that points to "https://developer.mozilla.org" and opens in a new tab securely.
Challenge: Write a link that scrolls to an element with id="contact" on the current page.
Hint: For the challenge, use href="#contact".
Quick check
Question: Why should you avoid using <a href="#"> for a button-like interaction?
Answer: It confuses assistive technologies by announcing a navigation change that doesn't occur, and it may cause the browser to scroll to the top of the page unexpectedly.
Summary
Hyperlinks are essential for navigation and must be distinguished from buttons used for actions. Proper usage involves clear anchor text, correct attributes for security, and semantic choices that align with user expectations and accessibility standards.