Links are one of the most fundamental features of the web. HTML links (hyperlinks) let users click and navigate to another page, file, location, or email address.
Links are created using the <a> (anchor) tag. The href attribute specifies the destination URL:
<a href="url">Link text</a>Example:
<a href="https://www.redohub.com">Visit RedoHub</a>| Type | Example | When to use |
|---|---|---|
| Absolute URL | href="https://www.example.com/page.php" |
Linking to external websites |
| Relative URL | href="/about.php" or href="../images/photo.jpg" |
Linking to pages/files within your own site |
The target attribute specifies where to open the linked page:
<!-- Opens in same tab (default) -->
<a href="https://www.example.com" target="_self">Same tab</a>
<!-- Opens in new tab -->
<a href="https://www.example.com" target="_blank">New tab</a>
<!-- Opens in parent frame -->
<a href="https://www.example.com" target="_parent">Parent frame</a>
<!-- Opens in full body of window -->
<a href="https://www.example.com" target="_top">Full window</a>| Value | Description |
|---|---|
_self | Default — opens in the same tab/window |
_blank | Opens in a new tab or window |
_parent | Opens in the parent frame |
_top | Opens in the full body of the window |
target="_blank" along with rel="noopener noreferrer" for security: <a href="..." target="_blank" rel="noopener noreferrer">
You can make any image into a clickable link by wrapping it with an <a> tag:
<a href="https://www.redohub.com">
<img src="logo.png" alt="RedoHub Logo" width="100">
</a>Use mailto: in the href to create a link that opens the user's email app:
<a href="mailto:info@redohub.com">Send us an email</a>Use tel: to create a clickable phone number link — especially useful on mobile:
<a href="tel:+1234567890">Call us: +1 234 567 890</a>By default, browsers style links like this:
| State | Default Color | Description |
|---|---|---|
| Unvisited | Blue | Link not yet clicked |
| Visited | Purple | Link already visited |
| Active | Red | Link being clicked right now |
You can change link colors with CSS:
a:link { color: green; } /* Unvisited */
a:visited { color: grey; } /* Visited */
a:hover { color: red; } /* On hover */
a:active { color: orange; } /* On click */By default links are underlined. To remove underline, use CSS:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}You can style a link to look like a button using CSS:
<a href="page.php" style="
background-color: #198754;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;">
Go to Page
</a>target="_blank" without rel="noopener noreferrer". Without it, the new tab can access window.opener and redirect your original page — a real security and phishing risk.
<div onclick="..."> instead of <a href="..."> for navigation. Divs aren't keyboard-focusable or crawlable by search engines the way real links are — this quietly breaks accessibility and SEO.
href="#" placeholders in production. A bare # jumps to the top of the page and can confuse users. If a link isn't ready yet, disable the control or remove it instead.
Combining tel: and mailto: links with icons makes a simple, real "click to contact" card:
<div class="contact-card">
<p><a href="tel:+8801234567890">📞 Call: +880 1234-567890</a></p>
<p><a href="mailto:hello@redohub.com">✉️ Email: hello@redohub.com</a></p>
</div>Rendered result:
On a phone, tapping the call link opens the dialer directly — no app or JavaScript needed.
Q: Is target="_blank" bad for SEO?
A: Not by itself. It's a UX choice, not a ranking factor — just always pair it with rel="noopener noreferrer" for security.
Q: Why use <a> instead of onclick for navigation?
A: A real <a href> works without JavaScript, is reachable by keyboard (Tab key), gets crawled by search engines, and lets users open it in a new tab — none of which a clickable <div> gives you for free.
Q: Can I link to a section on the same page?
A: Yes — give the target element an id, then link to it with href="#that-id". See the MDN <a> reference for the full list of link behaviors.