HTML Tutorial

Chapter 7 – HTML Hyperlinks

Dear readers, welcome to the chapter 7 of our HTML Tutorial series. In the previous chapter, we wrote about using Comments in HTML. In this chapter we shall explore what are Hyperlinks in HTML and how can we add them into a Web page.

If you go to any website, let’s say www.123mylist.com, if you click on any of the placeholder text given on the top navigation bar, you will get redirected to another page. These are nothing but HTML Hyperlinks, also known as HTML Links.

An HTML Link helps the user to navigate to another page in the same website or an external website upon clicking a web element which is linked to the target URL.

To add a Hyperlink within an HTML document, you can use the following syntax:

Syntax:
HTML:

<a href="https://www.example.com/page1">Go to new Website</a>
                            

You can try running this code snippet on our Online HTML Editor to view the output.

Here,

• The “a” tag refers to Anchor tag. It is used to denote that the enclosed text should link to a target URL.
• The Anchor tag contains an attribute called “href”. This attribute refers to the target URL where the user will be redirected upon clicking the web element.
• The text which is enclosed inside the anchor tag is called the Anchor text or the Link text. While rendering the link element, user will be shown this link text.

Href Attribute:

As explained above, the “href” attribute contains the target URL where we want to redirect our user on clicking the Link text.

You can provide URLs in the HREF attribute in multiple ways

• Absolute URLs: You can provide the absolute URLs with the all the prefix such “https://” included within the URL. An example of such URLs can be seen in the earlier examples.


• Relative URLs: If you want to redirect the user to another page which is present relative to the same website domain and might be present in any sub folder or a parent folder, you can use relative URLs. An example is given below for reference:
    <a href=”/folder/sub-page.php”>Relative URL Demo</a>


• Email URLs: Sometimes, you may have link titled such as “Contact” and upon clicking them you may want the system to open a new draft email to your email id. In such case, you can make use of “mailto:” keyword within the href attribute. Upon clicking such URLs, system shall open the default Email application of the user in his local machine and shall open a draft email. The draft email here will have the email field prepopulated with the email id present in the Anchor tag. An example of this keyword is given below for reference:
    <a href="mailto:hello@123mylist.com">Contact me</a>

Target Attribute:

The anchor tag supports an optional attribute called “target”. This attribute denotes where the target URL shall be displayed on the browser.

The syntax to use this attribute is given below:

Some of the commonly used values for this attribute are given below for reference:

• “_self”: This is the default value followed by the browser even if the target attribute is not provided in the anchor tag. This means that upon clicking the link, system shall open the target link in the same browser tab.
• “_blank”: This means that the link should open on a new tab of the browser.

Title Attribute:

Sometimes you might have noticed that when you do mouse hover over the link text, you get to see some helpful messages for the user. These are called tooltips. If you want to add such tooltips over your link text, you can make use of the title tag.

The syntax for using title attribute is given for reference.

HTML:
  <a href="https://www.example.com/page1" title="This is tooltip message">Go to new Website</a>

Here, you can enclose custom plain text messages within the value of the “title” attribute in order to display them as tooltips.

I hope you liked reading this tutorial. Do share among your friends and circles.

See you soon in the next tutorial.

Next Chapter Chapter 8 - HTML Images