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="https://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://html6.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.

• _blank - in a new window or tab
• _self - the same window/tab as it was clicked (this is default)
• _parent - parent frame
• _top - full body of the window
• framename - in a named frame

Rel

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

• alternate – link to an alternate representation of the document (i.e. print page, translated or mirror)
• author – link to the author of the document
• bookmark – URL used for bookmarking
• external – the referenced document is not part of the same site as the current document
• help – link to a help document
• license – link to copyright information for the document
• next – link to the next document in the series
• nofollow – links to an unendorsed document, like a paid link. This way you can ask the Google search spider not to follow that link.
• noreferrer – the browser should not send an HTTP referer header if the user follows the hyperlink
• noopener – any browsing context created by following the hyperlink must not have an opener browsing context
• prev – previous document in a selection
• search – link to a search tool for the document
• tag – a keyword (tag) for the current document

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