🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

How to Create an HTML Link: Learn to Write HTML Link Code Easily

Reading time 5 min
Published Jun 23, 2017
Updated Oct 2, 2019

TL;DR – HTML link is a clickable element that takes the user to another page.

HTML links, or hyperlinks, allow users to interact with a website easily. To insert one into your webpage, you should use a pair of <a> tags:

Example
<a href="https://www.bitdegree.org">This is a link to coding lessons.</a>

Note: an HTML link cannot be an empty element, as it must have clickable content.

It is crucially important to include the href attribute in the <a> tag – otherwise your HTML link won't lead anywhere. Like all attributes, it is specified in a name–value pair defined in lowercase. In the example below, you see a simple HTML link directing you to BitDegree's website:

Example
<a href="https://www.bitdegree.org">This is a link to coding lessons.</a>

An absolute URL defines the full path to the linked web address. It's a complete URL address that includes http://www... or https://www.... In most cases, it is used to reference external resources.

A relative URL describes the linked web page's location in relation to the current page. Relative URLs are normally used to refer the user to a different location within the current website:

Example
<a href="html-basics">HTML Tutorials</a>

If you want to reference a file in a folder found one level above the present folder, you’ll need to add two periods and a slash:

Example
<a href="../html-basics" target="_blank">HTML Tutorials</a>

A root relative URL is normally used to reference an address relative to the root of the current website’s domain. It always begins with a forward slash which specifies the root:

Example
<a href="/learn/html-basics" target="_blank">HTML Examples</a>

Let's see a simple comparison to get the difference between absolute, relative and root-relative HTML link better. Imagine you want to add a link to the https://www.bitdegree.org/learn/html-tags page in the https://www.bitdegree.org/learn page. This is how you would define a link in each type:

Type Link
Absolute https://www.bitdegree.org/learn/html-tags
Relative html-tags
Root-relative /learn/html-tags

You can make an image function as a link too. The technique is the same as with words: the clickable element must be placed within anchor tags. In this case, you have to nest <img> tags inside the link tags:

Example
<a href="https://www.bitdegree.org/course/coding-for-beginners-space-doggos">
  <img src="image.png" alt="HTML Tutorials" style="width: 200px; height: 200px; border: 0;">
</a>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

By default, all browsers underline HTML links and give them the following colors:

Color Meaning
Blue An unvisited HTML link
Purple A visited HTML link
Red An active HTML link

To change the default colors, you can use CSS internal styling:

Example
<style>

a:link {
    color: crimson; 
    background-color: lightgrey;
}

a:visited {
    color: maroon; 
    background-color: lightgrey;
}

a:active {
    color: orangered; 
    background-color: lightgrey;
}

a:hover {
    color: red; 
    background-color: lightgrey;
}

</style>

Note: you can also set a different color for when the user hovers their cursor on the link.

You can bookmark your HTML links to jump to specific parts within the same webpage (or a different webpage). Bookmarks can be helpful if your content is extremely long – e.g., we used bookmarks to simplify navigating this reference table.

To create HTML bookmark links on the same page, you’ll need to create a bookmark using the id attribute. Use it to mark the section of the page you intend users to end up:

Example
<h2 id="examples">HTML Examples</h2>

Then, create the hyperlink to it by adding a hash symbol (#) followed by the id value of the bookmarked target:

Example
<a href="#examples">Jump to HTML Examples</a>

To include a link to the bookmark from a different page, include the target URL before the hash symbol (assuming there’s an id with that value on another page):

Example
<a href="https://www.bitdegree.org/tutorials/difference-between-html-and-html5/#What_is_HTML5">Jump to read about HTML5</a>

href

The href attribute defines the target URL address for an HTML link, making the marked word or phrase clickable. As href creates the hyperlink to another web page, the HTML link would not work as intended without it:

Example
<a href="https://www.bitdegree.org">This is a link to coding lessons.</a>

style

The style attribute sets style properties (e.g., colors) for the element:

Example
<a href="https://www.bitdegree.org/" style="background-color: lime;">This is a hyperlink!</a>

target

The target attribute defines where the HTML link will be opened. Here are all the possible options:

Option Description
_blank Directs the user to a new window or tab.
_self (default feature) Loads the URL in the same window or the tab it was clicked.
_parent Loads the URL in the parent frame. It’s only used with frames.
_top Loads the linked document in the full body of the window.
frame name (deprecated) Loaded the linked document in a named frame.
Example
<a href="https://www.bitdegree.org" target="_blank">Loads in New</a>
<a href="https://www.bitdegree.org" target="_self">Loads in Self</a>
<a href="https://www.bitdegree.org" target="_parent">Loads in Parent</a>
<a href="https://www.bitdegree.org" target="_top">Loads in Body</a>

title

The title attribute outlines extra information about the link’s purpose. If a user hovers their mouse over the HTML link, a tooltip will appear shortly describing the objective, title or any other information of the HTML link:

Example
<a href="https://www.bitdegree.org/" title="Link to learn">Learn to code</a>

  • If you are using an image as a link, it's a good idea to include the alt attribute to provide alternative text to be displayed in case the picture doesn't load.
  • The href attribute can also be used with the mailto property and an email address as its value. Upon clicking on the HTML link, the user will be directed to their default email application with the email address already included:
Example
<a href="mailto:[email protected]">Email BitDegree</a>