HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python TL;DR – HTML link is a clickable element that takes the user to another page.
Contents
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 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:
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 |
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>
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Setting HTML Link Colors
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:
<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:
Then, create the hyperlink to it by adding a hash symbol (#) followed by the id value of the bookmarked target:
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:
| 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. |
<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
altattribute to provide alternative text to be displayed in case the picture doesn't load. - The
hrefattribute can also be used with themailtoproperty 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:
