A link is an element that, when clicked, redirects the user to another web page.
Links are usually text-based, but they can also be an image or otherwise.
To create a link use the <a> tag -- this is called an anchor tag.
A link to Google.
<div>
Click here: <a href="https://www.google.com" target="_blank" >Google</a>
</div>
The syntax for a link:
<a href="url">Link text</a>
The <a> tag defines an HTML link; a
stands for anchor.
The href attribute defines the destination address (the URL or page the user will be taken to).
Link text
is the visible part which will be displayed as a clickable text.
For details on the anchor tag, see our HTML anchor Tag Reference.
A local link points to a page on the same website -- i.e. the same domain.
Local links have a relative URL without the https://www.mysite.com part.
Most websites use local links almost exclusively.
Below is a local link to the SQL tutorial on this website.
Note that the href attribute does not include the https://www.dofactory.com/ part.
Please visit our SQL Tutorial
<p>
Please visit our <a href="/sql"> SQL Tutorial </a>
</p>
Note: Links that redirect to an external website are refered to as external links.
The Google link above is an example of an external link.
By default, a link will appear in these colors (all browsers support this):
In most cases, these colors are undesirable, but they are easily customized with CSS.
When creating link colors the hover and active link states need to be considered.
The hover state occurs when the mouse moves over the link.
The active state occurs when the link is clicked.
In CSS these states are represented by the :hover
and :active
pseudo classes respectively.
In this example, hover over the link to see the link color change to red. Then click (keep the button down for a while) to see it change to green. The background colors also change.
<style>
a.custom {color:darkblue;background:aliceblue;}
a.custom:hover {color: orangered;background:cornsilk;}
a.custom:active {color:forestgreen;background:paleturquoise;}
</style>
<div>
Link with custom colors:
<a class="custom"
href="https://www.google.com"
target="_blank">Google</a>
</div>
Learn more about pseudo classes in our CSS Pseudo Classes Reference.
The target attribute specifies where to open the linked page.
It can be one of the following values:
Value | Description |
---|---|
_self | Opens the page in the same tab/window. This is the default. |
_blank | Opens the page in a new tab. |
_parent | Opens the page in the parent iframe. In the same iframe if there is no parent. |
_top | Opens the page in the topmost part of the iframe. In the same iframe if there is no topmost. |
framename | Opens the page in a named iframe. |
An <a> tag with a target="_blank" attribute.
Clicking the link will open the linked page in a new browser tab.
This link opens Google in a new tab.
<p>
This link opens
<a target="_blank" href="https://www.google.com">Google</a>
in a new tab.
</p>
Images can also be used as links.
Clicking the image will open a new browser tab with the Google search page.
<a href="https://www.google.com/" target="_blank">
<img src="/img/html/google.png">
</a>
To send an email use the mailto
scheme on the <a> tag.
Clicking the link will open the default mail client, such as, Outlook.
<a href="mailto:sales@company.com">
Send us an email
</a>
The title attribute adds additional information to the element.
When the mouse moves over the element a tooltip with this information appears.
An <a> tag with a title attribute.
Hover your mouse over the Google link and a tooltip appears.
Hover over this link: Google
<p>
Hover over this link:
<a title="Click to visit Google"
href="https://www.google.com"
target="_blank">Google</a>
</p>
HTML links redirect the user to other pages, but they can also
function as a download link by adding a download
attribute to the <a> tag.
Click the image and that same image will download.
<a href="/img/html/html5.png" download>
<img src="/img/html/html5.png" alt="Download HTML5 image">
</a>
A link can also point to another element on the same page.
These same-page links are refered to as bookmarks or anchers.
Two links are required on the same page: a source link and a destination link.
When the source link is clicked the page will scroll to the destination link (the bookmark).
The source link states: Go to bottom. A hidden destination link is located at the bottom of this page. Clicking the link will scroll the page to the bottom.
This is the complete code with source and destination links.
<!-- the visible source link -->
<a href="#bottom">Go to bottom</a>
...
<!-- the hidden destination link -->
<a id="bottom"></a>
The visible source link has an href attribute prefixed with a '#'.
And the hidden destination link uses an id attribute.
Tip: The destination does not have to be an <a> tag. It can be any other element type, for example an <h2>
which would naturally mark a specific section in a large document.