Friday, June 12, 2020

HTML Links

The acronym HTML stands for hypertext, or text that is linked to other information. HTML enables us to link to other Web pages, as well as graphics, multimedia, e-mail addresses, newsgroups, and downloadable files. Anything you can access through your browser can be linked to from within an HTML document. 

Web pages can contain links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. A hyperlink is text, an image, or any other object in an HTML document that can be clicked in order to gain access to another web document. Normally, links are distinguished as being external or internal to the current page. 

Linking Documents - The <a> Element 

A link is specified using the <a> element. This element is called anchor tag as well. Anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document.  Following is the simple syntax to use this tag.

External Linking 

The <a> tag itself doesn’t serve much purpose without its attributes. The most common attribute is href, which is short for hypertext reference: it tells the browser where to find the information to which you are linking. The text included in between the opening and closing a tag is what the person viewing your Web page can click. In most cases, this text is highlighted as a different color from the surrounding text and is underlined, as shown in Figure.

Anchor Attributes

Following are most frequently used attributes for <a> tag.

  • href: specifies the URL of the target of a hyperlink. Its value is any valid document URL, absolute or relative, including a fragment identifier or a JavaScript code fragment.
  • target: specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window will be opened to display the loaded page, if set to "_self" then loads the new page in current window. By default its "_self", if set to "_name" then open the link in the window of that name.
  • id: attributes places a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to goto that label.
  • event: attributes like onClick, onMouseOver etc. are used to trigger any Javascript or VBscript code.
  • title: attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link. 

Base Path for Links: It is not required to give a complete URL for every link. You can get rid of it if you will use <base> tag in your header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

For example we have used following base tag in all the pages at 

  <base href="" />

So now if you will use <a href="/html/index.htm" then it will be considered as

<a href="">

In deciding what to use as the value of your href attribute, consider what type of link you want to use. Two basic types of links exist. 

  • Absolute
  • Relative 

Absolute Links: Absolute links are those that include the entire pathname. In most cases, you use absolute links when linking to pages or sites that are not part of your own Web site. For example, if you are linking from your Web site to Yahoo!, you type “” as your link.

Relative Links: Relative links are called so because you don’t include the entire pathname of the page to which you are linking. Instead, the pathname you use is relative to the current page. Relative links are most commonly used when you want to link from one page in your site to another. Here’s an example of what a relative link might look like: 

<a href="contact-us.html">Contact Us</a> 

This link looks for the contact-us.html file in the same folder that contains this page. If you were linking to a file in another folder below the current one, the value of your href might look like this: 

<a href="p/contact-us.html">Contact Us</a> 

Internal Linking 

Sometimes you may want to link to a section of text within a page on your Web site. To link to a section of a Web page, you must first give that section a name. 


<!DOCTYPE html>
<html lang="en">
    <title>Internal Hyperlinking </title>
    <a id="top"></a>
    <a href="#section1">Jump to section 1</a>
    <a href="#section2">Jump to section 2</a>
    <a href="#section3">Jump to section 3</a>
    <hr />
    <a id="section1"><b>Section 1</b></a>
    <p>Text for Section 1 goes here.</p>
    <p><a href="#top">Back to the top</a></p>
    <hr />
    <a id="section2"><b>Section 2</b></a>
    <p>Text for Section 2 goes here.</p>
    <p><a href="#top">Back to the top</a></p>
    <hr />
    <a id="section3"><b>Section 3</b></a>
    <p>Text for Section 3 goes here.</p>
    <p><a href="#top">Back to the top</a></p>
    <hr />

Create an Anchor

An anchor is a place within a page that is given a special name, enabling you to link to it later. Without first naming a section, you cannot link to it. Here is an example of an anchor:

In this example, the phrase in between the opening and closing a tag is displayed in the Web page and labels the anchor as “Section 1.” 

Link to an Anchor 

To create the link to an anchor, you also use the a tag and the href attribute, as you would when creating any other type of link. To finish the link, you need to include a hash symbol (#) and the anchor name as the value of the href attribute.

Lets us create a program to link to different sections of the page.

If you need to create a link to a specific section with another page (not the one you are currently working on), then you use that page’s filename and the anchor name separated by a hash mark (#), as in the following example.


<a href="">View names beginning with an "A" on our blog  page.</a> 

In this case, the browser will first look for index..html and then locate an anchor named “intro” on that page. 

Target Windows

Have you ever visited a Web site and noticed that a second instance of the Web browser opened when you clicked a link? This happens when Web developers use the target attribute to load links in a browser window other than the one you are currently using. 

For example, you might want to offer visitors to your site a link to search Yahoo!, but you don’t want to encourage them to leave your site. If you use “_blank” as the value of the target attribute in your link to Yahoo!, the browser will launch a new browser window to load 

If you want to Open Link in a New Window instead of new Tab, You can use following JavaScript code:

<a href=""
   onclick=", 'newwindow''width=300, height=250, resizable=yes, scrollbars=yes'); 
  return false;"
>  Google</a>

Links to E-mail Addresses 

When you want to give someone easy access to your e-mail address, you can include it on your page as a mailto link. This means instead of using http:// in front of your links, you use mailto: to preface youre-mail addresses. 

Clicking this link in a browser causes the visitor’s e-mail program to launch. Then it opens a new e-mail message and places your e-mail address in the To: box of that message.

Other Calls to Action

With HTML5, you’re not limited to phone numbers. You can add other calls to action such as email, messaging, fax, etc. HTML5 protocols include:

  • tel: – place a phone call
  • mailto: – open an email app
  • callto: open Skype
  • sms: – send a text message
  • fax: – send a fax

All of these protocols are used in the same way as we saw above.

Setting Link Colors

You can use three more attributes of the body tag to customize the three link colors of a Web page: normal link colors (link), visited link colors (vlink) and active link colors (link).


    <body bgcolor="#ffffff" text="#000000" link="#003366" 
  vlink="#999999" alink="#ff33cc"> 

Note: Default Link Colors: In most cases, the default link color for browsers is blue. The default visited link color is purple, and the active link color is red. Remember, as with many other features of Web browsers, the user ultimately controls these default colors. You can also change color using CSS Links. 

Different link states can have individual properties of link color in CSS. Developers choose to change the default style and color of URLs to make links match their web designs.

Here are the states you can change link color for with CSS:

  • a:link – unvisited.
  • a:hover – when the mouse pointer hovers over it.
  • a:active – when a user clicks the link.
  • a:visited – visited link.

In the following example, we set all four link states with different colors using CSS as:

See the Pen CSS Links by PANKAJ (@pankkap) on CodePen.

Custom Link Button using CSS

Sometimes you may want to use a button to link to another page or website rather than to submit a form or something like that. This is fairly simple to do and can be achieved in several ways.

One way is to use <a> anchor tag. Like other HTML elements, CSS can add background colors and padding to links that allow us to create the appearance of a button. Here’s our link using this technique:

Here are the CSS properties necessary for styling Link as buttons :

  • color – to set the color of the text which represents the link
  • background-color – to add colors to the button
  • padding – to determine the size of the button
  • text-decoration – to remove underline from links
  • text-align – to set the alignment of links
  • display – to describe how your link should be shown

In this example, we combine these CSS properties to display links as buttons:

See the Pen Custom Link Button by PANKAJ (@pankkap) on CodePen.