HTML <a> anchor Tag

The <a> tag, or anchor tag, creates a link to another page which can be on the same website or on another domain. Clicking the link will open that page.

HTML Tag

Example

#

An <a> tag.
Clicking the link will open a Google search page.

<a href="https://www.google.com" 
   target="_blank">Google</a>
a = anchor
href = hyperlink reference

Using the <a> anchor tag

The <a> or anchor tag creates a link (hyperlink) to another page.

When a link is clicked it redirects the user to that page.

The linked page is specified with the href attribute, for example: href="/products".

More Examples

An <a> tag with a link to an external site.
The target value specifies that the page opens in a new browser tab.

<a href="https://microsoft.com" target="_blank" >Microsoft</a>

Code explanation

The <a> tag creates a clickable link.

The content of the tag is what the user sees, i.e. Microsoft.

The href attribute sets the target page or site, i.e. https://microsoft.com

The target attribute specifies in what tab or window to open the new page.


Attributes for <a>

This table lists the <a> tag attributes.

Attribute Value Description
href URL The URL (i.e. page) the user will be redirected to
id    identifier Defines a unique identifier for the <a> anchor element.
class    classnames Sets one or more CSS classes to be applied to the <a> anchor element.
style    CSS-styles Sets the style for the <a> anchor element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the <a> anchor element is hidden.
title    text Sets a title that displays as a tooltip when a anchor element is hovered.
tabindex    index Sets a tab sequence relative to the other elements.
rel nofollow
noopener
noreferrer
external
author
help
license
prev
next
bookmark
search
alternate
tag
Defines the relationship between the current page and the linked page.
target _blank
_self
_parent
_top
framename
Defines where or how to open the linked page
type media-type Media type of the linked page
hreflang language-code Language of the linked page
media media-query Specifies that linked page is optimized for a given media or device
ping list-of-URLs One or more space-separated URLs that want to follow the link.
A short POST request is sent to each URL.
download filename Makes the link downloadable, rather than redirection

For additional global attributes see our global attributes list.

Note: The following attributes require that href has a value:


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on the <a> tag in HTML5.

Attribute Description Alternative
charset Sets character encoding of linked URL. Content-Type HTTP header
coords A comma-separated list of coordinates. <area>
name Defines a target location to jump to. id
shape The shape of a link's region in an image map. <area>
rev Specifies a reverse link. The opposite of rel. n/a

Attribute Examples


Local Link

A local link to a page on the current website.
The link opens a page on the current site.

Go to SQL Tutorial
 Go to <a href="/sql" target="_blank">SQL Tutorial</a>

Image as a link

An image as a link.
Clicking the image opens the Wikipedia website.

<a href="https://en.wikipedia.org/wiki/Main_Page" target="_blank">
  <img src="/img/html/enwiki.png"/>
</a>

Open in a new tab

A link that opens the page in a new browser tab with a target attribute set to _blank:

Go to Microsoft
Go to <a target="_blank"
         href="https://www.microsoft.com/">Microsoft</a>

Sending email

A link sending email with mailto: placed before the email address in href:

Send an email to Deborah Anderson
Send an email to <a href="mailto:deborah@company.com" 
                    target="_blank">Deborah Anderson</a>

Dialing a phone number

A link dialing a phone number with tel placed before the phone number in href:

Please call Deborah Anderson
Please call <a href="tel:15125551111">Deborah Anderson</a>

Calling JavaScript

A link calling Javascript which displays an alert box:

Click here. An alert box will appear.
<a href="javascript:alert('Hi, I was clicked');">Click here</a>.
   An alert box will appear.

Links have a state

Links (i.e. <a> tags) can have different states which, by default, appear as follows:

  • unvisited link: underlined and color blue.
  • visited link: underlined and color purple.
  • active link: underlined and color red.

An unvisited link has never been clicked by the user.
A visited link has been clicked and the linked page/site has been visited.
An active link is being clicked by the user, i.e. the mouse button is down.

Note: These default colors are easily changed with CSS.

Tip: Most sites don't distinguish unvisited and visited links. Their appearance is usually the same.


The rel attribute

The rel attribute defines how the linked page is related to the current page.
Below are the possible values for rel.

Value Description
nofollow Specifies the link is not endorsed or is not controlled by the current page's author. Search engines often ignore links flagged as nofollow.
noopener No context or information about the current page is sent to the linked page. Used for untrusted links to avoid tampering with the current page.
noreferrer Prevents the browser from sending referrer data about the current page.
external Indicates the link is to a page outside the current site (different domain). Applies to: a, area, form
author Specifies the link it to a page about the current page's author.
help Specifies the link is to a help page.
license Specifies the link is to a page with licensing information.
prev Specifies the previous page in a series of pages.
next Specifies the next page in a series of pages.
bookmark Indicates the link is a permalink that can be used for bookmarking.
search Specifies the link is to a search page for the current page.
alternate Specifies the link is to an alternative version of the page. For example, a different device type, or other language version.
tag Specifies a tag keyword for the current page, i.e. a word that identifies the current page.

Did you know?

Did you know?

Creating a download link with <a>

The <a> tag is mostly used to provide links to other pages.

However, it can also function as a download link by adding a download attribute.

Click the image and it will download itself..

<a href="/img/html/html5.png" download>
  <img src="/img/html/html5.png" alt="HTML5">
</a>

Browser support

Here is when <a> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides