HTML CSS JS

HTML Links - The Anchor Tag

HTML links make it possible for us to navigate on websites, going from one page to the other clicking text or images with the mouse.

Let's see a simple text link:

<a href="http://geekprank.com/">Geek Prank</a>

This will render like this in your web browser:

Geek Prank

We use the a inline tag to make a link which is the abbreviation for anchor. The part that's between the opening and closing anchor tags is will be clickable on the page. 

The opening link tag has a href parameter which specifies where the link will redirect. You can put any web address or URL (Uniform Resource Locator) between the quotes.

Possibilities With Links

Use a hashtag to link to jump to an ID on the same page.

<div id="top">Top of the page</div>
...
<a href="#top">Jump to the top</a>

The link below will open the user's email client to send a message to the address specified. Whenever you make a link to an e-mail address you always need to put mailto: in front.

<a href="mailto:bob@ilearnhtml.com">E-mail Bob</a>

 The example below will trigger a telephone call when clicked on mobile devices:

<a href="tel:0036012345678">+36 012 345 678</a>

Relative And Absolute Links

In this lesson we are going to be talking about relative and absolute links. Pretty much a relative link might look something like this:

<a href="/contact/">Contact Us!</a>

And a absolute link might look something like this:

<a href="https://ruwix.com/contact/">Contact Ruwix</a>

Just like their name says, relative links redirect somewhere, relative to the current location. Absolute links include the domain name of the website.

Let's say you add the link to two different websites. They will all link to the contact page of the current website. If you add our absolute link example to any website then they will all link to the Ruwix contact page.

It's recommended to use relative links because they will keep working, even if you move your website to a new domain or to your local computer.

Link tag attributes

I have mentioned before the href attribute but we can customize our links with the tag attributes below.

<a title="HTML Editor" href="https://htmlg.com/" target="_blank" rel="external">HTML G</a>

Title

This will be the tooltip when you hover your mouse above the link.

Target

Specifies where to open the linked document.

Rel

This attribute specifies the relationship between the current and the linked documents.

Styling The Links

We can assign separate CSS styles for visited, hovered and active (being pressed) links. You'll find more details about this in the CSS lesson.

<style>
a, a:link {
  color: blue;
  text-decoration: underline;
}
a:visited {
    color: black;
}
a:hover {
  text-decoration: none;
}
a:active {
   background: yellow;
}
</style>

Start the HTML Link Generator