HTML Links

The HTML provides an element <a> through which we can create a link between the different documents and navigate.

It is also called an HTML hyperlink, and it is not just capable of linking external documents, but also, the section of a web page can be linked, which we will learn later in the tutorial in the chapter HTML Bookmarks.

Let's see the syntax for creating a link for an HTML document:

Syntax

For example, suppose we want to send a user to visit our first chapter 'Introduction to HTML'. Now we know that the name of that HTML document is 'what-is-html' (URL). Then we will create a link as follows:

HTML Code

<a href="what-is-html">Introduction to HTML</a>

The link will be displayed on the page in the browser as:

Result

Introduction to HTML

Let's take another example where we want to create a link for our website homepage. Then we will create a link in an HTML document as follows:

HTML Code

The browser will display it as follows:

Result

Home Page

Let's take an example. Click on the 'Result on Editor' button to examine the output on the web browser screen.

Example

<!DOCTYPE html>

<html>

<head>

<title>Create an HTML Link Example</title>

</head>

<body>

<h1>Create HTML Link</h1>

<a href="https://resultuniversity.com/">Home Page</a>

<a href="what-is-html">Introduction to HTML</a>

<p>An HTML link has been created using tag a. The URL is written in the href attribute and it is invisible on the screen. Only the text between the opening and closing tag is visible.</p>

</body>

</html>

Result on Editor

Here we notice that only the content of the element <a> is visible on the screen and the URL part is hidden.

For example, the text Home Page is displayed on the web screen.

We also notice that when we move the mouse pointer over a link, it turns into a little hand and when we click it, the browser opens the page whose URL was specified in the href attribute.

So, basically, HTML links are the mechanism through which we can create an interconnection between the different HTML documents.

Basic Summary of the HTML Links

The HTML element <a> is used to define a link.
The URL of the linking document or page is specified in the href attribute.
The visible text is written between the opening <a> tag and the closing </a> tag.
By default, the browser shows an unvisited link in blue color.
It displays a visited link in purple color and an active link is shown in red color.
With CSS we can modify the default look of an HTML link.

The href Attribute

The href attribute of element <a> contains the address of the page (URL) that we want to link to.

This address can either be specified with an absolute URL or a relative URL.

Absolute URL

An absolute URL is a full web address which means it contains the protocol, hostname, and path to a specific resource on the internet.

Absolute URL Example

https://resultuniversity.com/html/what-is-html

Relative URL

A relative URL only contains the path to the document and is relative to the current page.

Releative URL Example

/html/what-is-html
OR
what-is-html

Note: A relative URL that starts with a slash / is relative to the root domain while a relative URL that starts without a slash is relative to the current page.

For example, if we are viewing a page at https://resultuniversity.com/html/what-is-html then a relative URL basic-html-tags resolves to:
https://resultuniversity.com/html/basic-html-tags

And a relative URL /css/what-is-css resolves to:
https://resultuniversity.com/css/what-is-css

Example

<!DOCTYPE html>

<html>

<head>

<title>Relative and Absolute URL Example</title>

</head>

<body>

<h1>Absolute URL Example</h1>

<a href="https://resultuniversity.com/html/what-is-html">Absolute URL</a>

<p>The link above is created with an absolute URL. Click on the link to see where it resolves to.</p>

<h1>Relative URL Examples</h1>

<a href="what-is-html">Relative URL - 1</a>

<a href="/css/what-is-css">Relative URL - 2</a>

<p>Links above are two relative URLs. Click on them to see where they resolves to.</p>

</body>

</html>

Result on Editor

The target attribute

While browsing the internet you have come across links that open in new windows or tabs when clicked. This functionality is achieved using the target attribute of element <a>.

It specifies where to open a linked resource (URL).

The target attribute can have the following values:

_self
The link specified with target="_self", opens in the same window or tab. It is the default setting for all the links when the target attribute is not specified in tag <a>.

HTML Code

<a href="https://resultuniversity.com" target="_self">Home Page</a>
_blank
The link that contains the target value _blank, opens in the new window or tab.

HTML Code

<a href="https://resultuniversity.com" target="_blank">Home Page</a>
_top
This value of the target specifies that the link should be opened in the full body of the window.

HTML Code

<a href="https://resultuniversity.com" target="_top">Home Page</a>
_parent
When specified inside the target attribute, it hints browser to open the link in the parent frame.

HTML Code

<a href="https://resultuniversity.com" target="_parent">Home Page</a>

The Title Attribute

The tag <a> can be specified with a title attribute. The value of the title attribute is shown as tooltip text when the user mouse over the defined link.

It is used to provide extra information about the link user going to click.

The Title in a Link

<a href="https://resultuniversity.com/html/html-tutorial" title="Start Learning HTML">HTML Tutorial</a>

Example

<!DOCTYPE html>

<html>

<head>

<title>The Title Attribute in Link</title>

</head>

<body>

<h1>Title Attribute in a Link</h1>

<a href="https://resultuniversity.com/html/html-tutorial" title="Start Learning HTML">HTML Tutorial</a>

<p>The above link has a title attribute with some extra information. Mouse over the link to see tooltip text.</p>

</body>

</html>

Result on Editor

HTML Email Link

HTML can create links for emails. All we need to do is to write the email address after mailto: in the href attribute of tag <a>.

See the example below:

Email Link

<a href="mailto:[email protected]">Write an Email To Me</a>

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Email Link Example</title>
</head>
<body>

<h1>HTML Email Link</h1>

<a href="mailto:[email protected]">Write an Email To Me</a>
<p>This is an example of Email link. Click on the link to see where it opens.</p>

</body>
</html>

Result on Editor

The element <a> can be nested and it can contain other elements inside.

Hence it is not just text that can be made into a link but also other elements of HTML can be made into links.

HTML Image Link

An <img> element inside the opening <a> and the closing </a> tags make an image link.

Image Link Code

<a href="https://resultuniversity.com/html/web-browser">
<img src="chromelogo.png" alt="chrome browser" style="width:50px;height:50px;">
</a>

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Image Link Example</title>

</head>

<body>

<h1>HTML Image Link</h1>

<a href="https://resultuniversity.com/html/web-browser">
<img src="chromelogo.png" alt="chrome browser" style="width:50px;height:50px;">
</a>

<p>This is an example of an image link. Click on the link to see where it opens.</p>

</body>

</html>

Result on Editor

HTML Button Link

When an <button> element is defined inside the start tag <a> and the end tag </a>, the button element turns into a button link.

HTML Code

<a href="https://resultuniversity.com/html/web-browser"><button>Web Browsers</button></a>

Using a javascript onclick event a <button> can also be made to act as a link. See the code below:

HTML Code

<button onclick="document.location='web-browser'"><button>Web Browsers</button>

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Button Link Example</title>

</head>

<body>

<h1>HTML Button Link</h1>

<a href="https://resultuniversity.com/html/web-browser"><button>Web Browsers</button></a>
<br>
<button onclick="document.location='web-browser'">Web Browsers</button>

<p>Links defined above are button links. See the code how they are defined. The first link is defined with a tag. The second link is defined using the javascript onclick event.</p>

</body>

</html>