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 = anchorhref = hyperlink reference
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>
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.
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:
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 |
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>
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>
A link that opens the page in a new browser tab with a target attribute set to _blank:
Go to <a target="_blank"
href="https://www.microsoft.com/">Microsoft</a>
A link sending email with mailto: placed before the email address in href:
Send an email to <a href="mailto:deborah@company.com"
target="_blank">Deborah Anderson</a>
A link dialing a phone number with tel placed before the phone number in href:
Please call <a href="tel:15125551111">Deborah Anderson</a>
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 (i.e. <a> tags) can have different states which, by default, appear as follows:
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 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. |
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>
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 |
