Html Links

Html Links

  • A link is a connection from one Web resource to another
  • Web links have two basic components, the link and the target.

=> The link is the text in the main document that refers to another document.

=> The target is the document (or particular location in the document) to which the link leads.

  • The link starts at the “source” anchor and points to the “destination” anchor,
    which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).

HTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

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

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href=”url“>Link text</a>

The href attribute specifies the destination of a link.

Example

<a href=”http://www.paktutorial.com/“>Visit Best Tutorial site</a>

which will display like this: Visit Best Tutorial Site

Clicking on this hyperlink will send the user to Paktutorial’ homepage.

Tip: The “Link text” doesn’t have to be text. You can link from an image or any other HTML element.


HTML Links – The target Attribute

Target Attribute Values Value Description
_blank Opens the linked document in a new browser window
_self Opens the linked document in the same frame as the link

_parent Opens the linked document in the parent frameset
_top Opens the linked document in the main browser window, replacing
name any and all frames present

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example

<a href=”http://www.paktutorial.com/” target=”_blank”>Visit Paktutorial!</a>

HTML Links – The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Note:
The upcoming HTML5 standard suggest using the id attribute instead of the name attribute for specifying the name of an anchor.
Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Hyperlink Bookmark on the Same Page

This page shows the HTML code for making bookmarks within the same page. This is achieved by using two different hyperlink codes. These hyperlink codes work together in pairs. One is the go-to target hyperlink and the other is the destination bookmark.

Hyperlink Bookmark Code

Insert the following HTML code into the part of the web document you want to bookmark:

Code

<a name=”top”></a>

Now make a hyperlink that points to the bookmark:

Code

<a href=”#top”>Top of Page</a>

Output

Top of Page

Notes

In the above example, top is the name of the variable value. You can rename it according to your choose.