HTML Links

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.

---

The <a> Tag

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>

---

Absolute vs Relative URLs

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

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

---

Image as a Link

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>

---

Link to an Email Address

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>

---

Link to a Phone Number

Use tel: to create a clickable phone number link — especially useful on mobile:

<a href="tel:+1234567890">Call us: +1 234 567 890</a>

---

Link Colors

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 */

---

Remove Link Underline

By default links are underlined. To remove underline, use CSS:

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

---

Button Styled as a Link

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>