9 Online Demos to Learn HTML Links – The Anchor Tag

9 Online Demos to Learn HTML Links – The Anchor Tag

Links of HTML

HTML link, also called as Hyperlink, is the way to connect one web page to another or allow visitors navigate across the website. If you are new to HTML, you have seen links on almost all websites that you come across in the headers, the left menu or right menu or within the paragraphs.

The clicks that you use to open Contact us, about, product pages, service page, details, Add to basket or cart etc. and the source you came across to this page (most probably via google or some other search engine) is also by the link.

In this tutorial, you can see dozens of hyperlinks that are linked to other pages within the website.

You can give hypertext or anchor text to the links or also can use images as the links by using the <a> tag.

A few examples of hyperlinks of HTML with code are

A Basic link

A link with target as _blank

Example of HTML image link

A mailto link example

HTML button link

Link with and without underline example with CSS

Link in hover state with CSS properties

A short video about links

The HTML <a> tag

The tag that is used in HTML to create the links in HTML is the <a> tag. Where <a> stands for Anchor. In this tutorial, we will explain how to create the links with <a> tag of HTML along with its mostly used attributes.

The basic syntax of the <a> tag is:

<a href=”some link”>Hypertext</a>

Where:

  • <a>: opens the hyperlink tag
  • href=””: is where the location of destination page is specified (href is explained below)
  • Hypertext: The Hypertext or also called as the anchor text is the information/text visible to the visitor. For example “Click here” can be the hypertext or anchor text.
  • </a>: Closing tag of the link

A running example with HTML code is:

HTML links

Experience this online

By default, the color of the link is blue till it is in the normal state, i.e. until it is clicked. A clicked link default color is purple while the active link is red. You can change all these setting by using style or CSS which is explained below.

HTML href attribute

The href is an attribute of the <a> tag. This is the most important attribute of hyperlinks or <a> tag.

The href stands for Hypertext Reference. Where H is for Hypertext and Ref for Reference.

The href tells or specifies the location of the destination path or URL where your visitor will be taken to, as clicked on the given anchor text.

For example:

<a href=”https://www.tutorialscollection.com/”>Tutorials Collection</a>

Where href specifies the path or URL where the user will be taken as “Tutorials Collection” is clicked.

Tutorials Collection

You can use complete URL or relative path in the href. See both examples below:

Specify full path in HTML <a> href

The example below specifies the full path in the link tag:

Experience this online

Specify relative path in <a> href HTML

The example below sets relative path in the link tag:

Experience this online

The anchor text

The anchor text is the text that is visible to the visitor of the web page. The anchor text should be descriptive so that a user easily understands the intention of the link given in anchor tag. The anchor text is given after the href attribute. See the example below:

Experience this online

In the above example, the text HTML table is the anchor text which is readable to the user where a visitor can easily understand where the link will lead to.

HTML target attribute

The target is an attribute of the link, <a> tag. The <a>’s target attribute specifies where the link should open. For example, if you give a reference link in your web page to an external website then you may want a visitor to open the link in a new window or a new tab of the web browser. While your active page should remain open.

If the link goes to your own website then you may want to open the link in the same window. See examples below of opening links to the same and new tab or window.

A target _blank example

The target value set to “_blank” will open the link in the new window or tab of the web browser. See example below:

Experience this online

The target is specified after the HTML href attribute.

HTML target _self example

The _self is the default value of target attribute. If you do not specify the target attribute, the link in HTML will be opened in the same window, where it was clicked. See example below:

Experience this online

How to create an image link

In the above examples, we used anchor text that is linked to other web pages or URLs. You can also use images rather anchor text in the HTML links. To use an image link, simply use the img tag in place of hypertext.

Example of HTML image link

The example below takes our site’s logo, which is a .png image and links it to another page by using HTML a tag with the img tag.

HTML image link

Experience this online

As you can see, we used the <img> tag and specified image path rather using the hypertext. The HTML image code is

<a href=”https://www.tutorialscollection.com/html-table-how-to-use-table-in-html-with-border-td-tr-style-etc/” target=”_self”>

<img src=”TC_logo.png”>

</a>

HTML mailto link

The HTML mailto is used if you need to link an email address to the hyperlink. You can specify an email address, subject etc. If a user has set up an email program, for example, outlook express. Clicking on the link will open outlook with the given email address and subject.

Example of using the mailto link

The example below shows how to link an email address by using mailto.

Experience this online

You can also specify subject etc. To read more about mailto link go to this tutorial.

The button link

You can also make the button a link. By placing button code in place of the anchor text, the button can be used as a link.

Example of a button with <a> and href

Following is a demo of HTML button link. The example below uses a button inside the anchor tag with href:

Experience this online

links with CSS styling

You can use the power of CSS to make hyperlinks look appealing and stand out with beautiful text effects and controlled visited, active and hover states.

You can set the link color, font size, styles, background, border etc with CSS.

A complete chapter is dedicated to CSS links where you can see running examples of the links in the normal state, hover state, active and visited states.

Further Reading: Tables of HTML | The HTML tutorial