HTML Anchor


January 7, 2022, Learn eTutorial
1351

In this HTML tutorial, you will learn all about the Anchor in HTML. We will also discuss the different uses of Anchor Tags in HTML.

What is Anchor Tag in HTML?

A link, often known as a hyperlink, is a link that connects one web source to another. Users may navigate from one webpage to another on any server in the globe by using links. A connection has two endpoints known as anchors. A link begins at the source anchor and ends at the destination anchor, which can be an image, an audio or video clip, a PDF file, an HTML page, or an element inside the document itself, and so on.

In most browsers, links will show as follows by default:

  • An unvisited link is highlighted in blue.
  • A visited link is highlighted in purple and underlined.
  • An active link is highlighted in red.

Syntax

In HTML, links are specified using the <a> tag. The link or hyperlink could be a word, a group of words, or an image. The part of the link the user sees and clicks in a browser is always between the opening <a> tag and the closing </a> tag.


<a href="url">Link text</a>
 

Example for Anchor Tag


<a href="https://www.google.com/">Google Search</a>
<a href="https://www.learnetutorials.com/"> Learn E Tutorials </a>
<a href="images/smile.jpg">
    <img src="smile.jpg" alt="kites">
</a>
 

How to set the targets for the anchor tag?

The target attribute directs the browser to the location of the referenced content. There are four distinct targets, each with its own name that begins with an underscore (_) character:

  • _blank    — This command opens the referenced document in a new window or tab.
  • _parent  — This command displays the linked document in the parent window.
  • _self       — Displays the linked document in the same window or tab as the original. Because this is the default, it is not essential to mention it explicitly.
  • _top        — Displays the linked document in its whole in the browser window.

Example for Anchor Tag


<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
 

How to create bookmark anchors?

You can also utilize bookmark anchors to direct people to a specific area of the current webpage. Bookmarks are extremely useful if you have a lengthy website. Creating a bookmark using the anchor tag involves only two steps: Add the id attribute to the element where you wish to hop, then use the value of the <a> tag's href attribute.

Example for Anchor Tag


<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
 

Mostly used Anchor tag attributes

Attributes Values Description
charset charset The character encoding of the referenced resource is specified.
cords x,y coordinates The placement of the link on the screen is specified.
download filename When the user clicks on the link, this property specifies whether to download the associated resource instead of going to it.
href URL Specifies the target document's or online resource's location (such as an image, PDF, or any other media file).
hreflang language-code The language of the referenced document is specified. This attribute may only be utilised when the href attribute is given.
media media-query Specifies the kind of media for which the linked resource was created.
name text The name of an anchor is specified. Instead, use the global attribute id.
rel alternate author bookmark help license next nofollow noreferrer prefetch prev search tag Describes the connection between the hyperlinked document and the referenced resource. Only use this attribute if the href attribute is present.
rev rev Describes the linked document's connection to the original document (the opposite of the rel attribute).
shape rect circle poly default The form of the hotspot area, i.e. the selectable region for hyperlinks, is specified.
target _blank _parent _self _top framename Defines the target that will be used to open the linked resource supplied in the href property.
type content-type Specifies the content type (MIME type) of the connected material, such as "image/jpeg", "text/html", and so on.