In this section, we will learn what links are and how we can use them in HTML.
Hyperlink in HTML
Have you ever opened a website and saw a bunch of clickable words that you could click on them and be headed to other sections of that site? Well, those clickable words are called hyperlink.
A Hyperlink is basically a word, an image, a button, etc. that you can click in order to get a resource loaded on your browser.
Behind these words are basically a URL (the address of an external resource) that when we click on that word, browsers send a request to the specified URL and try to get whatever is on the other side of the URL.
Now, the question is how can we create hyperlink in HTML then? Well, the answer is with the help of the HTML <a> element! Using this element, we can turn a word or an image etc. into a clickable item that, if users clicked, a specific file be loaded on the browser.
Alright, enough with theory and now let’s move on and see how we can use this <a> element practically in HTML.
What is Anchor Tag in HTML and What is <a> HTML Tag?
The HTML element <a> stands for anchor and is the method we use to turn a word or an image etc. into a clickable item that people can click in order to get a resource to be loaded into their computer.
Now let’s see how we can use this element then.
HTML <a> Tag Syntax and Declaration: (Also HTML <a> href Attribute)
This is the syntax of the <a> element in an HTML document:
<a href=”URL-address">Clickable content </a>
First of all, the <a> element has an attribute called “href”. The value of this attribute is the URL address that we want to bring whatever it is on the other side of the address into the browser when a user clicked the link.
Now within the body of the link, we put the content that wants users to click on it in order to trigger the request for the target resource. The content could be a simple text or an image, etc.
Example: hyperlinking HTML
See the Pen hyperlinking HTML by Omid Dehghan (@odchan1) on CodePen.
In this example, if you click on the “Click to open Google homepage :)” a request will be sent to the `https://www.google.com` address and the homepage of this site will appear on the browser.
HTML Links: target Attribute
When calling for a resource using the <a> element, by default, the target resource loads its content on the browser-window that the current document is loaded within (the one that we’re in now). But we might not want to lose the current page and instead want to the load the target resource on a new tab or window.
This is where the `target` attribute can help us with!
The value we set for this attribute basically defines the location where the target external file should be loaded. So, for example, we can make the file to be loaded in a new tab or in a new window, etc.
Here’s the list of values we can set for this attribute:
|
Name |
Description |
|
_blank |
Open the linked document on a new tab or window. |
|
_self |
Open the linked document on the window of the current document. |
|
_parent |
Open the linked document on the parent frame |
|
_top |
Open the linked document on the full body of the window |
|
framename |
Open the linked document on the specified iframe. |
Example: HTML code for link
See the Pen HTML code for link by Omid Dehghan (@odchan1) on CodePen.
This time, if we click on the link above, the Google homepage will be opened in a new browser tab or window.
HTML Absolute URLs and Relative URLS
The value we set for the `href` attribute could be an absolute or related URL. We’ve explained these two types of URLs in the HTML URL section, but in short:
– An absolute URL is the one that includes the protocol, address, port number of the target file!
For example: https://www.bing.com/
Here, the protocol is “https”, the address is “www.bing.com” and the port number is the default one which is 80 (if we don’t set the port number of a website, browsers by default switch to the port number 80).
The use of absolute URL is especially useful if the target resource is from another website! For example, if our website is A and but the file we’re looking for is in another website with the name B! So here we need to put the absolute URL in order to specify the website address of the target resource.
– A relative URL, on the other hand, is the one that doesn’t have the website and protocol part! For example: `/music/32.mp3`. This URL means we want a file named `32.mp3` in the music directory of the same website (the one that the page is currently loaded on). As you can see, we didn’t use the protocol and website address as part of this URL.
The use of relative URL is especially useful when it comes to asking for a resource on the same website!
Example: relative URL link in HTML
See the Pen relative URL link in HTML by Omid Dehghan (@odchan1) on CodePen.
In this example, the address of the image is set to relative. This address is telling us that in the same directory that the page is coming from, there’s a folder named image and inside that folder we have a file named `sunset.jpg`. So now, if a user clicks on the link, the browser will send a request to the server of the website and ask for the file in the specified folder.
Example: Absolute URL link in HTML
See the Pen Absolute URL link in HTML by Omid Dehghan (@odchan1) on CodePen.
Here the resource we want is out of the current website! Basically, we’re asking for an external resource from a different domain. So for this reason, we need to put the absolute URL of that resource.
href for Email
Other than linking to external resources, we can use the <a> element to trigger sending an email to a specific address as well!
To do this we need to put the target email address as the argument of the `href` attribute like this:
Note that we need the `mailto:` part prefixed to the target email address we want to send an email to.
Example: linking to an email address
See the Pen linking to an email address by Omid Dehghan (@odchan1) on CodePen.
HTML Links: using an Image as a Link
As mentioned before, content of a link could be anything from a simple word to an image! For example, we can put an image as the content of a link and so whenever a user clicked on the image, a request for the target address will be triggered.
Example: using an image as the link in HTML <a> tag
See the Pen using an image as the link in HTML <a> tag by Omid Dehghan (@odchan1) on CodePen.
HTML Links and id Attribute
The <a> element is an HTML element, just like other elements we’ve seen so far. And so like other elements, this one also can be associated with an id attribute. Now using the value of this attribute, we can access the target element using other languages like CSS and JavaScript and apply any necessary changes to the element.
Example: setting the value of an id attribute as the value of HTML <a> link tag
See the Pen setting the value of an id attribute as the value of HTML <a> link tag by Omid Dehghan (@odchan1) on CodePen.
