<a> tag is a frequently
used tag and is one reason the World Wide Web is so connected.
<a> tag sits inside the
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.
<a> tag in HTML5 requires a
closing tag like
</a>. The text
visible on the web page sits between the open and close tags.
<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).
<a> tag hyperlink
is only active when it includes the
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.
<a> anchor tag is an inline
element so it can be input in the middle of a sentence. In this case,
<a> element sits
for a paragraph. The result is shown below and when the link is
clicked, the user will navigate in the current browser window.
This anchor tag points to example.com in the middle of a sentence.
As with all tags, Global Attributes can always be set.
Below is the list of eight optional attributes and values that can be
used in the
<a> element, again,
href being the most important.
The following attributes affect how the browser behaves when clicked:
The next attributes help the user understand the nature of the target before following the link:
|Attribute and Value||Purpose|
|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.|
|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
|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.|
|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.|
|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
|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.|
|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.|
|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".|
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.
Each user-agent (browser) has its own stylesheet per se. This dictates
how that browser styles each element by default. The Chrome browser
<a> element using the
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.
The following link, termed a URL fragment, points to the top of the current web page.
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.
Second, to drop the anchor, the following code, when clicked, will take the user to the header section labeled Definition.
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.
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.
The following link allows the user to download a text document called returns.txt, instead of opening it.
Downloading resources bring up security concerns, so most browsers require that the target file, like returns.txt here, must exist on the same domain.
<a> tag sits within the body
of the HTML document which is required to make it visible to the user.
Our YouTube Channel is growing, so subscribe here and check it out.
<meta>tag, click Back.
<p>tag, click Next.