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>
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)://).
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)://).
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>
We have some attributes specified for use only in the
<a> elements. They are out listed below.
The target Attribute
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.
List of target Attribute Values
|Target Attribute Value||Description||Examples|
|_blank||Opens the linked document in a new browser window or tab.||
|_self||Opens the linked document in the same page.||
|_parent||Opens the linked document in the parent frame. If you have nested iframes, _parent will open in the next level up a frame.||
|_top||Opens the linked document in a full body of the window. If the link is in an
|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.||_________|
Be careful when using the
target="_blank" as attackers abuse the use to perform malicious actions using the
window.openermay be partially used to control the referring page (the page from which a user opened another page). By redirecting it to a malicious URL.
- 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
- 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.
rel="noopener", this tells the browser not to give information about the referring page, this is programmatically equal to
window.noopener = null;
rel="noreferrer"this does the same as
rel="noopener"but also prevents the HTTP
Referrerfrom being sent to the new page.
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.