HTML5 a ( <a> ) or anchor Tag or Element

Last updated on June 30th, 2021

HTML5 a ( <a> ) Tag or Element

The HTML5 a ( <a> ) or anchor tag or element creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

The <a> or anchor tag defines a hyperlink, which is used to link from one page to another page.

The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

The <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.

The <a> or anchor element can be used in two ways :

To create a link to another document, by using the href attribute.
To create a bookmark inside a document, by using the id attribute.

By default, links will appear as follows in all browsers :

An unvisited link is underlined and blue in color
A visited link is underlined and purple in color
An active link is underlined and red in color

You can overwrite this using CSS.

What is an anchor Tag ?

An anchor tag is an HTML tag. It is used to define the beginning and end of a hypertext link. Search engines use the tag to determine the subject matter of the destination URL. Users click on the anchor text to reach the link target.

The anchor tag is essentially a tag that you can attach to a word or a phrase, except it brings readers down to a different section of the page as opposed to another webpage. You’re essentially creating a unique URL within the same page when you use this tag.

What is an anchor Tag in HTML ?

An anchor tag is an HTML tag. It is used to define the beginning and end of a hypertext link. Search engines use the anchor tag to determine the subject matter of the destination URL. Users click on the anchor text to reach the link target.

In another words, an anchor is a piece of text which marks the beginning and/or the end of a hypertext link. The text between the opening tag and the closing tag is either the start or destination (or both)of a link.

What are the benefits of anchor Tag ?

There are 3 benefits of anchor tag. Following are the benefits of anchor tag used in html.

No Scrolling : The biggest benefit to the anchor tag is not forcing website visitors to scroll down tons of information to find a particular section. If much more contents on the web page, it can be very difficult to find a certain section from all the contents.

Organize : Keep things in order on the web page. Instead of having to create several different web pages or splitting up a document, you can keep it all in one page.

Search Engine Use : Search engines redirect a user to a specific section of a webpage by using a anchor tag information which they crawled.

What are a ( <a> ) Tag Differences Between HTML 4.01 and HTML5 ?

In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.

HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.

What is the Syntax of a ( <a> ) Tag or Element

<a href="Target URL">Hyperlink Text</a>

An anchor element creates a hyperlink in the document and its href attribute sets the link's target URL. For example, the HTML markup
<a href="https://www.hudatutorials.com/html5/">HTML5 Tutorial</a>,
will render the word "HTML5 Tutorial" as a hyperlink. To render an image as a hyperlink, an img element is inserted as content into the a element. Like br, img is an empty element with attributes but no content or closing tag.
<a href="https://www.hudatutorials.com/html5/">
<img src="https://www.hudatutorials.com/html5/html5-qr.png" alt="HTML5 Tutorial" width="50" height="50" border="0">
</a>.

What are the attributes or properties of a ( <a> ) or anchor tag ?

Following are all the attributes or properties of HTML5 <a> anchor tag.

download attribute

Value : filename

Specifies whether to download the linked resource instead of navigating to it, when the user clicks on the link.

Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value.

The download attribute is only used if the href attribute is set.

The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).

If the download attribute value is omitted, the original filename is used.

Without a value, the browser will suggest a filename/extension, generated from various sources:
1. The Content-Disposition HTTP header
2. The final segment in the URL path
3. The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
Defining a value suggests it as the filename. / and \ characters are converted to underscores ( _ ). File systems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.

Note :

download only works for same origin URLs, or the blob: and data: schemes.
If Content-Disposition has a different filename than download, the header takes priority. (If Content-Disposition: inline, Firefox prefers the header while Chrome prefers download.)

href attribute

Value : URL

Specifies the location of the destination document or web resource (such as an image, PDF, or other media file).

The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs, they can use any URL scheme supported by browsers.

Sections of a page with fragment URLs
Pieces of media files with media fragments
Telephone numbers with tel: URLs
Email addresses with mailto: URLs
While web browsers may not support other URL schemes, web sites can with registerProtocolHandler()

The following attributes: download, hreflang, media, rel, target, and type cannot be present if the href attribute is not present.

hreflang attribute

Value : language code

The hreflang attribute specifies the language of the linked document. This attribute may only be used when href is specified.

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

media attribute

Value : media query

Specifies the media for which the linked resource is designed. The media attribute specifies what media or device the linked document is optimized for.

This attribute is used to specify that the target URL is designed for special devices like iPhone , speech or print media.

The media attribute only used if the href attribute is present in anchor element.

ping attribute

Value : list of URLs

Specifies 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.

The ping attribute specifies a list of URLs to be notified if the user follows the hyperlink. Specifies the URL to be notified if the user follows the hyperlink. Must be a space separated list of one or more valid URLs.

referrerpolicy attribute

Value : no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url

Specifies which referrer to send. The Referrer-Policy HTTP header controls how much referrer information (sent via the Referer header) should be included with requests. See Referrer-Policy for possible values and their effects as follows :

Referrer-Policy: no-referrer
Referrer-Policy: no-referrer-when-downgrade
Referrer-Policy: origin
Referrer-Policy: origin-when-cross-origin
Referrer-Policy: same-origin
Referrer-Policy: strict-origin
Referrer-Policy: strict-origin-when-cross-origin
Referrer-Policy: unsafe-url

Referrer-Policy Directives

no-referrer

The Referer header will be omitted entirely. No referrer information is sent along with requests.

no-referrer-when-downgrade (default)

This is the default behaviour if no policy is specified, or if the provided value is invalid. The origin, path, and query string of the URL are sent as a referrer when the protocol security level stays the same (HTTP→HTTP, HTTPS→HTTPS) or improves (HTTP→HTTPS), but isn't sent to less secure destinations (HTTPS→HTTP).

origin

Only send the origin of the document as the referrer.

For example, a document at https://www.hudatutorials.com/html5/ will send the referrer https://www.hudatutorials.com/

origin-when-cross-origin

Send the origin, path, and query string when performing a same-origin request, but only send the origin of the document for other cases.

same-origin

A referrer will be sent for same-site origins, but cross-origin requests will send no referrer information.

strict-origin

Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).

strict-origin-when-cross-origin

Send the origin, path, and querystring when performing a same-origin request, only send the origin when the protocol security level stays the same while performing a cross-origin request (HTTPS→HTTPS), and send no header to any less-secure destinations (HTTPS→HTTP).

unsafe-url

Send the origin, path, and query string when performing any request, regardless of security.

rel attribute

Value : alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag

Describes the relationship between the document containing the hyperlink and the linked resource. This attribute should be used only if the href attribute is present.

The relationship of the linked URL as space-separated link types.

rel attribute values

Value	Description
alternate	Provides a link to an alternate representation of the document (i.e. print page, translated or mirror)
author	Provides a link to the author of the document
bookmark	Permanent URL used for bookmarking
external	Indicates that the referenced document is not part of the same site as the current document
help	Provides a link to a help document
license	Provides a link to licensing information for the document
next	Provides a link to the next document in the series
nofollow	Links to an unendorsed document, like a paid link. ("nofollow" is used by Google, to specify that the Google search spider should not follow that link)
noreferrer	Requires that the browser should not send an HTTP referer header if the user follows the hyperlink
noopener	Requires that any browsing context created by following the hyperlink must not have an opener browsing context
prev	The previous document in a selection
search	Links to a search tool for the document
tag	A tag (keyword) for the current document

target attribute

Value : _blank, _parent, _self, _top, framename

Defines a target to open the linked resource specified in the href attribute. Specifies where to open the linked document.

Where to display the linked URL, as the name for a browsing context a tab, window, or <iframe>.

target attribute values

Value	Description
_blank	Opens the linked document in a new window or tab. usually a new tab, but users can configure browsers to open a new window instead.
_self	Opens the linked document in the same frame as it was clicked (this is default). The current browsing context. ( Default )
bookmark	Permanent URL used for bookmarking
external	Indicates that the referenced document is not part of the same site as the current document
_parent	Opens the linked document in the parent frame. The parent browsing context of the current one. If no parent, behaves as _self.
_top	Opens the linked document in the full body of the window. The topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.
framename	Opens the linked document in a named frame.

type attribute

Value : content type

Specifies the content type ( MIME type ) of the linked content for example, "image/jpeg", "text/html" etc. Hints at the linked URL’s format with a MIME type. No built-in functionality.

The type attribute specifies the media type of the linked document. The type attribute specifies the Internet media type (formerly known as MIME type) of the linked document.

The type attribute is only used if the href attribute is set.

Simple example on html5 a ( <a> ) or anchor tag or element.

<!DOCTYPE html>
<html>
  <body>
    <!-- The empty fragment ( href="#" ) to link to the top of the current page -->
    <h1>The empty fragment ( href="#" ) to link to the top of the current page</h1>
    <a href="#">click on this anchor element</a>
  </body>
</html>

HTML5 a ( <a> ) or anchor tag or element example on external link.

<!DOCTYPE html>
<html>
  <body>
    <!-- HTML5 a ( <a> ) or anchor tag or element example on external link. -->
    <h1>HTML5 a ( <a> ) or anchor tag or element example on external link.</h1>
    <a href="https://www.hudatutorials.com/html5/html5-tags">Tutorial on HTML5 tags</a>
  </body>
</html>

HTML5 a ( <a> ) or anchor tag or element example on internal link.

<!DOCTYPE html>
<html>
  <body>
    <!-- HTML5 a ( <a> ) or anchor tag or element example on internal link. -->
    <h1>HTML5 a ( <a> ) or anchor tag or element example on internal link.</h1>
    <p>This is <a href="yourhtmlpage.html">Internal Link</a> with html page reference.</p>
    <h2 id="my-topic">This is the ID reference heading</h2>
    <p>This is the id reference content.</p>
    <p>This is <a href="#my-topic">ID reference Link</a> with element id as reference followed by #.</p>
  </body>
</html>

How to Create SEO Optimized Anchor Tag

Anchor tag must have title attribute.
Anchor text must be short and descriptive.
Valid URL (Link must not be broken).