HTML Anchor

Hypertext links are clickable elements of a webpage. When the visitor clicks this element called hyperlink the linked webpage opens in the browser. HTML Anchor tag is used to create hyperlinks to establish links between the different pages of a website. Hyperlinks are used to create a navigational association between the pages.

Destination URL in Anchor Tag

To define links between web pages, HTML anchor tag needs a URL as the destination where the user will reach after clicking a hyperlink. URL is Universal Resource Locator is the string representing a webpage or a website.  It can also be the path of a resource in same or a different website.

Features of HTML Anchor tag <A></A>

  • Anchor tag is compulsorily a paired tag
  • In simple terms an HTML anchor is a unidirectional pointer identified by a text or another HTML element like an image or an HTML button. This pointer is the source and the page that opens up is the destination.
  • 32767 hyperlinks can be created in a webpage.
  • A hyperlink that is destined to reach another location in the same page is called an Internal Link.
  •  A hyperlink that is destined to open another resource like a different page, video, image or another website is called an External Link.
  • HTML Anchor tag always requires a destination in form of a URL of a webpage or declared target section in the same page defined with #.
  • The destination URL must be an existing webpage or resource. In absence of the location a browser will display “Page missing error”.

Syntax of Anchor Tag

The hyperlink tag is always defined in the body of a webpage’s code.  The hyperlink tells the browser that the following text or image is a link.

<A href=”resource URL of destination” attributes> Text/Image to be linked</A>

href means Hypertext reference. href is assigned a URL representing the destination or location where the user will be taken when the hyperlink is clicked.

Attributes of HTML Anchor Tag

href attribute is discussed in the syntax of the Anchor tag. In addition to this attribute the following attributes can be defined in <A> tag to define a hyperlink.

NAME

Name attribute can be set to any arbitrary alphanumeric string. This will define a target location in the same page for this Hyperlink to reach when clicked.

ACCESSKEY

Access key is a shortcut key that can be used by the user to click the link using keyboard. This key combination can be used to activate the hyperlink without using a pointing device like mouse.

TABINDEX

TAB key is used to browse through the clickable elements of a page or a form. TABINDEX attribute can be set to any unique value from 1 to 32767.  The assigned values to the hyperlinks in a page will allow a user to follow the tab sequence (in increasing order of tab index) of the links. On pressing the TAB key from keyboard the user will reach the next hyper link according to the tab sequence and can open the link by pressing the ENTER key.

TARGET

Target attribute defines where the URL defined with href  attribute will open. The follwoing options can be used to define target of a hyperlink.

  • _blank  – to open the link in a new window/tab
  • _self      – (default) to  open the link in the same location  where the link is coded
  • _parent                 – to open the link in the parent frame
  • _top – to open the link in the body of page window
  • Framename- to open the link in a named iframe

TYPE

TYPE attribute defines the type of MIME (Multipurpose Internet Mail Extensions) to be opened by clicking the hyperlink. The values to be assigned are-

  • text/plain
  • text/html
  • image/jpeg

TITLE

Title attribute is used to set tooltip text for a hyperlink. When the user rests the mouse cursor on the hyperlink, a value assigned to TITLE attribute appears in a small outlined box. This helps user to understand the purpose of the hyperlink in a page. The URL of the link specified in href attribute will be displayed at the bottom of the web browser.

Example for HTML Anchor Tag

<TITLE> Welcome to CSVeda.com </TITLE>
<HTML>
<P>The follwoing tutorials are available in the website</P>

<A href="https://csveda.com/java/" TARGET="_blank"> Java Programming </A>|
<A href="https://csveda.com/coding-in-python/" TARGET="_self"> Python Programming </A>|
<A href="https://csveda.com/flask-web-development-introduction/" TARGET="tarframe"> Flask Application Development </A>

<A href="#readhere"> Read Details </A>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A name ="readhere"><H3>Random Text</H3></A>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo consequat.
</HTML>
HTML Anchor output