HTML <a> Tag

The <a> tag is used to insert hyperlinks to other pages, or files, locations within the same page, email addresses, or any other URL. You can use both text and image as a hyperlink.

In the browser, hyperlinks differ in their appearance and color. By default, HTML links appear as underlined blue text. When you hover your mouse over a link, it turns red (active link). Links, that are already clicked (visited links), become purple.

You can change the color of links, remove underline or change the color of the links using CSS styles.

Syntax

The <a> tag comes in pairs, which means that the closing tag </a> is required.

Attributes

The <a> tag can have attributes that provide additional information about it.

The href attribute

The href is a required attribute of the <a> tag. It specifies a link on the web page or a place on the same web page, where the user navigates after clicking on the link. The value of the attribute can be either a URL or an anchor. The anchor points to the ID (unique identifier) of the part of the web page referenced. Before the ID we put a hash (#).

It looks like this:

<a href="url">the link text</a>

<a href="#a">the link text</a>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">W3docs.com</a>
  </body>
</html>

Result


W3docs.com


Click on the link, and you will be redirected to the home page of our website.

The target attribute

The target attribute is used to tell the browser where to open the document (by default, links open in the current window).

The target attribute can have the following values:

  • _blank– opens the link in a new window.
  • _self-opens the link in a current window.
  • _parent - opens the document in the parent frame.
  • _top - opens the document in full width of the window.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/" target="_blank">W3docs.com</a>
  </body>
</html>

Result


W3docs.com


The rel attribute

This attribute sets the relationship of the current document to the linked one. The attribute values can be as follows:

  • alternate - an alternative version of the document.
  • author- reference to the author of the document or article.
  • bookmark - a permanent link to be used for bookmarks.
  • nofollow - links to an unendorsed document (this instructs the search engines that the crawler should follow that link).

Attributes

Attribute Value Description
charset char_encoding Defines the character-set of a linked document.
Not used in HTML5.
coords coordinates Defines the coordinates of a link.
Not used in HTML5.
download filename Defines that the target will be downloaded when a hyperlink is clicked.
href URL Defines the URL of the linked document.
hreflang language_code Defines the language of the linked document.
media media_query Defines what media/device the linked document is optimized for.
name section_name Defines the name of an anchor.
Not used in HTML5.
ping list_of_URLs Defines a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.
rel alternate
author
bookmark
external
help
license
next
nofollow
noreferrer
noopener
prev
search
tag
Defines the relationship between the target object and the linked document.
rev text Defines a reverse link, the inverse relationship of the rel attribute.
Not used in HTML5.
shape default
rect
circle
poly
Defines the shape of the hyperlink.
Not used in HTML5.
target _blank
_parent
_self
_top
Defines where to open the linked document.
type media_type Defines the media type in the form of a MIME- type for the linked URL.

The <a> tag also supports the Global Attributes and the Event Attributes.

Browser support