HTML a Tag

Beginner

The <a> tag is a frequently used tag and is one reason the World Wide Web is so connected.

HTML Tags Reference

1. About the HTML a tag

The <a> tag sits inside the <body> element.

Its purpose is to make a hyperlink to a variety of resources, either on the same page, within the website or to external websites.

The user can follow links in a number of ways or can download or open files of different types. Resources other than web pages include links to email addresses, ftp sites, or files in other formats like pdf, xml, and csv.

The web browser by default shows actions in different colors and these are typically styled in CSS style documents. So links may appear differently whether the link is an active link (currently clicked on), an unvisited link, or a visited link.

2. Syntax for the HTML a tag

The <a> tag in HTML5 requires a closing tag like </a>. The text visible on the web page sits between the open and close tags.

The <a> element includes eight optional attributes. The three most important are listed below.

download - This brings up functionality in the browser allowing the user to download a file. The user may specify a different name or directory location.
href - This is where the developer inserts the URL reference pointer for the anchor tag.
target - This tells the browser how the link should be opened, meaning in the same window or in a new browser window (tab).

The resulting <a> tag hyperlink is only active when it includes the href attribute. Ideally this will point to a valid and locatable URL. An incorrectly specified link will return a 404 error, or file not found message, to the user.

Sample HTML input

This anchor tag points to <a href="https://example.com">example.com</a> in the middle of a sentence.

The <a> anchor tag is an inline element so it can be input in the middle of a sentence. In this case, the <a> element sits within the  element, for a paragraph. The result is shown below and when the link is clicked, the user will navigate in the current browser window.

Sample HTML output

This anchor tag points to example.com in the middle of a sentence.

3. Settings for the HTML a tag

As with all tags, Global Attributes can always be set.

Attributes and values for the a tag

Below is the list of eight optional attributes and values that can be used in the <a> element, again, with href being the most important.

The following attributes affect how the browser behaves when clicked:

download
href
referrerpolicy
target

The next attributes help the user understand the nature of the target before following the link:

hreflang
media
rel
type

Attribute and Value	Purpose
`download="filename"` (optional)	Instead of navigating to the resource specified this attribute will prompt the user to save a file using the download URL specification. The location of the resource must be on the same website domain due to security concerns.
`href="url"` (important)	Here the hyperlink to a URL is specified. Common resource types include: http:, https:, :ftp, mailto: and :file. When specified as a URL fragment, like `href="#"`, the user will be taken to the top of the current web page. Using `href="#section"` will point to a section of the document marked with the global attribute `id="section"` in a heading tag, for example.
`hreflang="language"` (optional)	Informs the browser the language of the linked resource. The text file BCP47 at ietf.org (opens in a new window) details the granularity of the language codes.
`media="type"` (optional)	New in HTML5 this attribute is for setting the preferred device type for the hyperlinked resource. Acceptable values include: print for printed pages, screen for computer monitors, smart phones and tablets, speech for page readers and all for all media types.
`rel="value(s)"` (optional)	Indicates the relationship between the current and linked document. This can be a single value or a list of space-separated values. This attribute has no default value. The alternate value can be used if other media, language or type are set. The author attribute notifies the user of a page about the author. The bookmark value identifies the location of a permalink, like an important article on a blog page. The external value identifies that the resource is outside the current website. The help value identifies the hyperlink as a help resource. The license value identifies a hyperlink that provides additional information about licensing information. The next value indicates the resource is the next in a series. The nofollow value indicates that the author does not endorse the link and would prefer it not be included in page ranks sorted by popularity in search engines. The noopener value is a safer addition when the browser opens a new window with the `target="_blank"` attribute and value. The noreferrer value can protect the privacy of the sender name by not sending an HTTP referrer in the document header. The prev value identifies the resource as the previous hyperlink in a series, much like next. The search value indicates this is a link to a resource used to search the document and related pages. The tag value provides a tag or element related to the current document.
`referrerpolicy="policy"` (optional)	To fine-tune data sent as referral information with the document. There can be six values here: no-referrer to not send the referrer in the document header, no-referrer-when-downgrade will not send the referrer header when served from an https: page to a http: page, origin will send only the domain name of the referrer but not other web link data, origin-when-cross-origin limits the scheme, host and port when linking to an external resource but will include the referrer's path when the link goes to the same origin. The strict-origin-when-cross-origin value sends the full URL for same origin links. The unsafe-url value sends the full URL to both cross-origin and same-origin requests, so is less safe and not advised. See the W3C Referrer Policy for more information.
`target="_self"` (optional)	This attribute can take one of four values. The _self value opens the new resource in the current window (the default). The _blank value opens the target resource in a new browser window or tab. The _parent value opens the resource in the parent window if there is one, otherwise it reverts back to the default. The _top value loads the resource in the top window if there is one, or reverts back to the default.
`type="MIME-type"` (optional)	An advisory attribute that informs the browser of the MIME-type of the linked resource. These are often called "media types" or "content types" like text, audio or image. They represent a two-part identifier. The Internet Assigned Numbers Authority (IANA) is responsible for maintaining the list of hundreds of MIME types. The full list can be found here: IANA Media Types (opens in a new window). MIME stands for Multipurpose Internet Mail Extensions, and the "MIME type" name is being phased out in favor of "media type".

Other a tag attributes

The following attributes have either been deprecated in HTML5, do not have wide adoption across common browsers like Chrome, Safari or Firefox, or are likely to be phased out in the future.

name
ping
rev
shape

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <a> element using the following properties.

a:-webkit-any-link { color: -webkit-link; cursor: pointer; text-decoration: underline; }

4. Examples of the HTML a tag

Example 1 - Create a link to an HTTPS resource in the original browser window

The following HTML code will create a link to example.com in the original window. The _self value is the default so it isn't required.

<a href="https://www.example.com" target="_self">example.com</a>

Example 2 - Create a link to the top of the current web page

The following link, termed a URL fragment, points to the top of the current web page.

Click <a href="#">here</a> to go to the top of the page.

Example 3 - Create a link to a named section within the current document

To create a link to a different section within the same document requires two steps.

First, the developer sets up where the browser should go on the same web page. As an example, this code sets it up in a heading tag.

<h2 id="definition">Definition</h2>

Second, to drop the anchor, the following code, when clicked, will take the user to the header section labeled Definition.

Click <a href="#definition">here</a> to go to the Definition section.

Example 4 - Create a link to an external website in a new window taking security precautions regarding referrers and headers

The following hyperlink will open in a new window taking the conservative approach regarding opening windows and not sending referral information in the document header.

Click <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">here</a> to go to example.com (opens in a new window).

As a web page designer, it makes for a better user experience to notify the user that a link will open a new browser window.

Example 5 - Create a link to download a local text file

The following link allows the user to download a text document called returns.txt, instead of opening it.

Click <a download="https://factorpad.com/returns.txt">here</a> to download the returns.txt file.

Downloading resources bring up security concerns, so most browsers require that the target file, like returns.txt here, must exist on the same domain.

HTML a Tag Reference and Examples

HTML a tag