HTML Tutorial

HTML Links

HTML Hyperlinks or simply Links refers a user from one document to another. It allows users to move from page to page through a reference URL.
URL - Stands for Uniform Resource Locator.

How to Write an HTML Link

A link is defined using the <a> tag. This is the syntax for defining a link:

<a href="url">link content</a>

The link content can either be a text, an image, or any other HTML element.

We have different types of HTML links, they are:

Internal links (also called local links) are links created to direct a user to another page or section on the same website.

A local link to a website is always specified without the HTTP scheme (without http(s)://).

See Example

External Links

External Links are links created to direct a user to another page or section on another website or another server.
An external link to a website is always specified with the HTTP scheme (http(s)://).

See Example

Onsite Links

Onsite links as the name implies are a type of links that a user clicks to jump from one current section to another on the same web page. The links are usually represented with the #, it directly points to the element which has the same id as the specified link. They can be text, another HTML element, or an image.

The example below takes the user to the <h1> element which has id="title" on the same page.

<a href="#head">Go To Title</a>

  Do It Yourself

Link Attributes

We have some attributes specified for use only in the <a> elements. They are out listed below.

The target Attribute

The links target attribute specifies how the linked document should be opened.

The following examples specify that the linked document should be opened in a new browser tab or a new window. Click on the link in the preview tab to see yourself.

See Example

List of target Attribute Values

Target Attribute Value Description Examples
_blank Opens the linked document in a new browser window or tab. 
<a href="html-links" target="_blank">HTML Links</a>
_self Opens the linked document in the same page. 
<a href="html-links" target="_self">HTML Links</a>
_parent Opens the linked document in the parent frame. If you have nested iframes, _parent will open in the next level up a frame. 
<a href="html-links" target="_parent">HTML Links</a>
_top Opens the linked document in a full body of the window. If the link is in an iframe, the new page will be opened in a new window itself 
<a href="html-links" target="_top">HTML Links</a>
Using framename Opens the linked document in the named frame. If a tab with the same name already exists, it opens to the existing tab, instead opens to a new tab. _________

Precaution!

Be careful when using the target="_blank" as attackers abuse the use to perform malicious actions using the window.opener object.

  • The window.opener may be partially used to control the referring page (the page from which a user opened another page). By redirecting it to a malicious URL.
  • The new page may run the same process as your webpage, running some JavaScript that might affect your page's performance.

Use Case

  • You directed a user to a page which you do not have control over
  • The attacker used the new website to change the location of the old page to a phished page that looks exactly like the former webpage, using window.opener.location
  • When the user comes back, they could not notice the page change because there's no significant difference in the (new) phished page and the old (real) page, so the user continues interaction while attacker gains the access.

Solution

  • Use rel="noopener", this tells the browser not to give information about the referring page, this is programmatically equal to window.noopener = null;​
  • Use rel="noreferrer" this does the same as rel="noopener" but also prevents the HTTP Referrer from being sent to the new page.

Safe Use 

It is reported that as at this writing, some browsers do not support the rel="noopener" attribute, so it is a good practice to use both, by adding rel="noopener noreferrer" this effects it on all browsers.

What You Should Know at the End of This Lesson

  • You should be able to create a link to a document on the same server of the directory(if on localhost).
  • You should be able to create a link to a document outside the server(external link).
  • You should be able to create a link that opens in a new window or new tab of the browser.
  • You should be able to tell briefly what HTML links are.
Previous Chapter Next Chapter

Related Chapters