HTML <a> anchor Tag

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

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

The linked page is specified with an href attribute.

For example: href=”/products”

A link to Google, created with an <a> tag.

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

a = anchor
href = hyperlink reference

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 <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:[email protected]" 
                    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 <a href="tel:15125551111">Deborah Anderson</a>

Calling JavaScript

A link calling Javascript which displays an alert box:

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

#

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

#