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

HTML Link: Definition and Syntax

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:

<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:

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

Absolute, Relative and Root-relative HTML Links

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:

<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:

<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:

<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:

Using Images as HTML Links

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:

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

Setting HTML Link Colors

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

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

<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.

HTML Bookmark Links

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:

<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:

<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):

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

Mostly Used HTML Link Attributes

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:

<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:

<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:

<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:

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

HTML Link: Useful Tips

• 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:

<a href="mailto:info@bitdegree.org">Email BitDegree</a>