❮ Previous Next ❯

HTML Link

HTML links may be either text or image or even button. It is used to jump from the active page to the another page. All website pages have multiple links.

1. Text as an HTML link

Text(s) can be used as a link by using href attribute with the target URL to the <a> tag to redirect into another page.

Syntax

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

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<a href="https://learncodinghub.com/"> Click here </a> to learn HTML5.
</p>
</body>
</html>
Run The code »

Output on the browser

Click here to learn HTML5.

When click on the "Click Here", this page will redirect to the target URL (here, https://learncodinghub.com/).
By default, the standard link will be underlined and blue in color.
The active link (when click) will also underline and red in color.

2. Image as an HTML link

Apart of text, an image can be used as a link by using href attribute with the target URL to the <a> tag. The image must be defined inside the <a> element.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<a href="https://learncodinghub.com/">
<img src="bala.jpg" alt="BalaPic">
</a>
</p>
</body>
</html>
Run The code »

Output on the browser

BalaPic

For the above example, the HTML document and the image file must be contained within the same folder or directory. The value of the src attribute should define properly inorder to display the image.

3. Button as an HTML link

A <button> element can be used to redirect to another page by using JavaScript onclick attribute.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="window.location.href='/html-a-tag/'"> Linked Button </button>
</body>
</html>
Run The code »

Output on the browser

For the above example, the HTML document and the image file must be contained within the same folder or directory. The value of the src attribute should define properly inorder to display the image.

HTML link text color

By default, the color of the link text has the following features:

  1. An unvisited link is underlined and blue.
  2. A visited link is underlined and purple.
  3. An active link is underlined and red.

But it can be changed by using either HTML attributes or CSS properties.

1. By using HTML attributes (Obsolete)

<!DOCTYPE html>
<html>
<head>
</head>
<body LINK="red" VLINK="blue" ALINK="black">
<p>
<a href="https://learncodinghub.com/"> Click here </a> to learn HTML5.
</p>
</body>
</html>

Attributes meaning

Attribute Note
LINK Color of unvisited links
VLINK Color of visited links
ALINK Color of a link when click

2. By using CSS properties

<!DOCTYPE html>
<html>
<head>
<style>

a {
color: blue;
}

a:hover {
color: red;
}

a:active {
color: black;
}

</style>
</head>
<body>
<p>
<a href="https://learncodinghub.com/"> Click here </a> to learn HTML5.
</p>
</body>
</html>
Run The code »

Types of giving href attribute values

  1. Internal link
  2. External link

Internal Hyperlink

If two HTML files is contained inside a same directory (same folder) namely page1.html and page2.html. These two pages can be linked by simply mentioning their names in the value of the href attribute.

Suppose the following file is page1.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="page2.html"> Click here </a> to go to page2.
</body>
</html>

When click on the link texts (Click here), the page1.html will be redirected to the page2.html. Such form of linking two HTML page having same parent directory is called internal hyperlink.

If the page2.html is contained in a sub-folder of a folder having page1.html, they can be linked as follows:

<a href="FolderName/page2.html"> Click here </a> to go to page2.

External Hyperlink

With external hyperlink, we can redirect from one domain to another domain.

Example

<a href="https://somewhere.com/"> Click here </a>

Form of giving Hyperlink

HTML Hyperlinks can be given into the multiple forms by using target attribute.
target attribute values:

Value Notes
_blank It opens the URL in a new tab.
_self It opens the URL in the same window.
Default value.
_parent It opens the URL in the active frame of the window.
_top It opens the URL in full size of the window.

Syntax of target attribute

<a href="URL" target="_self | _black | _top | _parent"> Link Text </a>

Do you know?

Like linked text, images can also have external and internal Hyperlinks like the case in the text links. Click here to learn more about the HTML Images.

HTML bookmark

If an HTML page has long content, giving bookmark can skip to the specific part of the current page.
There are two steps to create HTML bookmark.

Step-1: Use id attribute to an HTML element. It must be the destination element.

<h2 id="IH"> Internal Hyperlink
</h2>

Step-2: Add a link to the above id value (starting with #). It must be the origin element.

<a href="#IH"> Jump to Internal Hyperlink </a>

You can also jump to a specific part of an another page, using HTML bookmark.

Example

<a href="page2.html/#IE"> Skip </a>

HTML bookmark is mainly used at the top of a webpage which allows skipping to a specific part. The below example is how HTML bookmark is used within the page itself. Click and try it.

Summary of this page

  1. Text as an HTML Link
  2. Image as an HTML Link
  3. Button as an HTML Link
  4. HTML Link text color
  5. Types of href attribute values
    1. Internal Hyperlink
    2. External Hyperlink
  6. HTML Bookmark

Notes:

  1. HTML hyperlinks can be image, text and button.
  2. The href attribute is used to the <a> tag to make links.
  3. Make sure to add </a> if <a> tag is used.
  4. Texts link can have three colors: before click, when hover and while click.
  5. Inorder to redirect to the another site, website URL is mandatory.
  6. The default HTML target value is _self.
❮ Previous Next ❯