HTML Links

You can find multiple links in almost all webpages. They are used to take you from one page to another by simply making a click on them.

Another name for HTML Links is ‘Hyperlinks’.

When you click on a text or image with a hyperlink, it will take you to another document or webpage.

How will you indicate hyperlink?

When a mouse is taken on any link, a hand like figure will appear instead of a mouse cursor.
Also, a link does not need to be a text; it can be an image or any HTML element.

Syntax of HTML Links

HTML links are always defined within a tag.
This tag is used to specify a hyperlink on any text, image or an element.

Syntax:

<a href="URL"> Link Text </a>

To make a link, </a> tag is always used with ‘href’ (hypertextreference). ‘href’ is an attribute that specifies the target address or URL of a link. In the syntax, ‘Link Text’ is a visible part associated with the invisible link address i.e. URL.

Example:

<a href="https://en.wikipedia.org/wiki/HTML"> Learn more about HTML basics </a>

Here, a link will appear on a text ‘Learn more about HTML basics’ and when you click on this text, it will take you to the web page, whose address is mentioned within the quotes.

Such type of link is called “Absolute URL”.

Another Example

<p> For beginners, please visit here to <a href="https://en.wikipedia.org/wiki/HTML"> learn more about HTML basics </a> </p>

When you open this page in a browser, it will look like:

For beginners, please visit here to learn more about HTML basics.
(Link will display on ‘learn more about HTML basics’)

Local Links

Local links are used when you want to link a text or image to a page on the same website. Here, there is no need to specify ‘https://www...’

Such type of link is called “Relative URL”.

Example:

<a href="example.asp"> Example of local links </a>

HTML Links Colors

By default, the color of a link appears as:

⦁ Blue and underlined, when it is an unvisited link
⦁ Purple and underlined, when it is a visited link
⦁ Red and underlined, when it is an active link

These default colors can be changed using CSS. Here is the example:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link
{
color:"green";
background-color:"transparent";
text-decoration:"none";
}
a:visited
{
color:"red";
background-color:"transparent";
text-decoration:"none";
}
a:hover
{
color:"green";
background-color:"transparent";
text-decoration:"none";
}
</style>
</head>
</body>
</html>

<p> For beginners, please visit here to <a href="https://en.wikipedia.org/wiki/HTML" > learn more about HTML basics </a> </p>
</body>
</html>

Target Attribute

Target attribute for HTML links is used to specify a location to open a link.
It provides you freedom to open a link in a new window or in an existing window.

Example:

<a href="https://en.wikipedia.org/wiki/HTML" target="_blank"> Learn more about HTML basics </a>

Here, a link will be opened in a new window.

When you use target attribute and _blank attribute to specify HTML link, it means you are telling the browser to open this link in a new tab or window.

Target attribute can have the following values (only one at a time):

_blank
A link will open in a new window or tab.

_self
A link will open in the same window or tab.

_parent
A link will open in a parent frame. This value is only applicable when you use frames in your HTML document.

_top
A link will open in the full body of the window by canceling out any frames.

framename
A link will open in a targeted frame, where you have to mention the name of a specific frame.

HTML Links - Image

Here, you will learn how to insert a link to an image.

Example:

<a href="https://en.wikipedia.org/wiki/HTML">
<img src="html_tutorial.jpg” alt="Learn HTML Basics” width="700” height="600”>
</a>

Here, a link with alt tag will appear on the image named as ‘html_tutorial.jpg’.

Link Titles

The title attribute is used to provide extra information about an element to the visitors of a web page.

This information appears when a mouse is moved over the element.

Example:

<a href="https://en.wikipedia.org/wiki/HTML" title="Best Tutorial for HTML Basics"> Learn more about HTML basics </a>

Creating a Bookmark with HTML Links

You can allow your visitors to jump to a specific section on the same webpage using the bookmarks.

Bookmarks are usually created for long web pages where visitors do not want to go through the whole content and looking for specific information. You can skip the content and take them directly to their desired location by scrolling the page.

Firstly, you have to create a bookmark and add a link to it specifying the exact location/section.

A bookmark is created with an id attribute, which defines the name of a particular bookmark.

Example:

<h1 id="A3"> Grapes </h1>

Now, add a link to this bookmark.

Example:

<!DOCTYPE html>
</html>
<body>
<p> <a href="#A3"> Go to Name of a fruit </a> </p>
<h1> Truck </h1>
<p> Information about Truck </p>
<h1> Submarine </h1>
<p> Information about Submarine </p>
<h1 id ="A3"> Submarine </h1>
<p> Information about Grapes </p>
<h1> Potato </h1>
<p> Information about Potato </p>
<h1> Computer </h1>
<p> Information about Computer </p>
</body>
</html>