Text Hyper Link

What is Hyperlink & What Hyper-Link Does!

A piece of text or an image that directs a user to another document i.e. webpage, next/previous topics or sections on the same webpage or to an Email Address just by clicking/taping on it is called a Hyperlink.

Difference in the Look of Hypertext and Normal Text:

By default, simple and non-hyper-linked text is in black color and the picture looks same as it looks in any image viewer without any change and nothing happens by clicking such text or image.
While on the other hand, a Hyper-linked text looks different from the non-hyper-linked text. By default Hyper-linked text is in blue color and is underlined and the image looks same as it looks in any image viewer without any change.

Whenever a user drags mouse pointer over (in technical term hover) a Hyper-linked text or image, the mouse pointer gets changed into a hand shape from a normal arrow shape (on windows). When a user clicks a Hyper-linked text its color also gets changed, normally from blue to purple, to indicate that the user has already visited this particular link.

Anchor Element and Its Important Attributes:

An Anchor Element is used to create a Text Hyper-Link or an Image Hyperlink
Syntax: <a attribute="value">Text to be displayed</a>
Important Attributes:

1. href: takes the URL of the target id as its value.
2. target: describes whether the linked document should get opened in the same or new tab, parent frame or child frame or in a new window.
3. name: takes any valid group of alphanumeric characters as its value.

Examples:

Following are some examples which illustrate how to use an Anchor Element to create a:

1. Text Hyperlink Targeting a Webpage/Document
2. Text Hyperlink Targeting a Section with in a same Webpage
3. Text Hyperlink Targeting a Section in a Different Webpage

Text Hyperlink Targeting a Webpage/Document

Exemplary Code:

<a href="http://webdevelopingwithkhuram.blogspot.com/p/html-tutorial.html">Go To WebdevelopmentwithKhuram.blogpost.com</a>
                

Example Result:

Go To WebdevelopmentwithKhuram.blogpost.com

Explanation of the Example:

1. Anchor Element is used here to create a Text Hyperlink.
2. The url of the target document is given as a value of the href attribute.
3. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tag.

Text Hyperlink Targeting a Section with in a same Webpage

Exemplary Code:

<a href="back_to_top"></a> 
<nav>
    <a href="#target_1">Go To Target_1</a>
    <a href="#target_2">Go To Target_2</a>
</nav>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_1"></a>
<p><h2> This is target 1</h2></p>
<a href="#back_to_top">Top</a>
<p>
    This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.
</p>
<a name="target_2"></a>
<p><h2> This is target 2</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

Go To Target_1
Go To Target_2

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 1

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.
3. href attribute of the Anchor Element takes names("target 1", "target 2" and " back_to_top") of the target preceded by a '#' symbol as a url.
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.

Text Hyperlink Targeting a Section in a Different Webpage

Exemplary Code:

<a href="back_to_top_1"></a> 
<nav>
    <a href="#target_1">Go To Target_1</a>
    <a href="#target_2">Go To Target_2</a>
</nav>
<p>
        This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

</p>
<a name="target_1"></a>
<p><h2> This is target 1</h2></p>
<a href="#back_to_top">Top</a>
<p>
            This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

</p>
<a name="target_2"></a>
<p><h2> This is target 2</h2></p>
<a href="#back_to_top">Top</a>

Example Result:

Go To Target_1 of Other Page
Go To Target_2 of Other Page

This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top
This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph. This is exemplary text of the exemplary paragraph.

This is target 2

Top

Explanation of the Example:

1. Anchor Element is used to set the "target 1", "target 2" and " back_to_top" targets.
2. name attribute of the Anchor Element takes the values "back_to_top", "target_1" and "target_2" to set the targets.
3. href attribute of the Anchor Element takes the url of the other webpage and the names("target 1" and "target 2") of the target preceded by a '#' symbol as a url (i.e url + target section).
4. The text to be displayed (such as Home, About Us, Help, Download) is put in between <a> and </a> tags for the links.
5. No text is displayed in between the <a> and </a> tags where the targets are set on the targeted webpage and the href attribute is not used.

Note: Hash symbol '#' in href indicates that the target is in internal link and can be in the same or in a different document.