If i say the HTML links are the backbone of internet that wouldn’t be wrong. Links in HTML are responsible to move you from one page to other and one website to another website. Let’s take https://www.google.com for example. When you search for a keyword google provides you links to other websites which have data related to your keyword.
So now you see you are moving here and there with help of HTML links? Similarly let’s take example of your Facebook timeline. When you click on a page or post link that takes you to that post or page or group. So this is how links are playing a vital role in whole internet. And the structure of HTML links is more simple than you can think.
How to make a HTML Link?
HTML link starts with tag <a> and ends with tag </a> anything between these tags is a link label. Link label for example you are saying between Click here. So the click here word is the link label.
href="" attribute is where you provide the link to go. href stands for Hypertext Reference. Let’s take a look to simple link below which takes you to google.com
<a href="https://www.google.com/">Let's go to Google!</a>This example will print on your web page Let’s go to google which would be linked to google website. So in href="" you can provide the reference where the link will go. We have local links coming below as well.
Target attribute in HTML link
target="" attribute is used when you want to tell browser this link should open in new window or new tab.
If you do not define the target="" attribute the default behavior is self. Which means the link will open in same window or tab you are currently on.
The target attribute can have one of the following values:
_blank– Opens the linked document in a new window or tab_self– Opens the linked document in the same window/tab as it was clicked (this is default)_parent– Opens the linked document in the parent frame_top– Opens the linked document in the full body of the window- framename – Opens the linked document in a named frame
Let’s take a look to an example which opens the link in new tab instead of opening in same tab. This technique is used when you are giving links in your page to other sites. And you want user to also stay on your website so opening link in new tab will make sure your site is still open in other tab.
<a href="https://www.facebook.com/" target="_blank">Facebook</a>Title attribute in HTML link
title="" attribute in HTML link is just a title of the link itself. For example when a visitor hover on your HTML link you want to tell him something. You can use title="" attribute. So when a user hover the link that title will appear as small label below link.
See example for usage of title="" attribute in HTML.
<a href="https://www.linkedin.com/" title="You will leave our site">LinkedIn</a>Types of Links in HTML
We have some types of links in html and you should practice to make yourself comfortable to each type of HTML links.
- Email link in HTML
- Telephone link in HTML
- External path link in HTML
- Local Links in HTML
Email link in HTML
To provide an email link in html you just need to use mailto: and your email address in href="" attribute. Every browser have different behaviour for mailto: links so in case the email link is not working in your browser. Please check your browser settings. Let’s take a look to email link in html example below.
<a href="mailto:[email protected]" title="Send us Email">Email Us</a>Telephone link in HTML
Same like email link you also define telephone link in href="" attribute. The phone link in html href="" attribute is with tel: and your number. Every browser have different way to behave the telephone link. Mostly in computers the phone link will open in skype or other applications which handle the phone. On other hand mobile phones will open dial pad with number typed in them. Let’s see the example of phone link in html.
<a href="tel:1231231234" title="Click to call">Call Us</a>External Path links or Absolute Links
External path links or absolute links are the links which have full reference or URL to the path. The complete url with starting https:// or http:// protocol is considered external or absolute path. Check our article to read more about absolute links in HTML.
External Path example to different website. The example below gives full URL to the path where to go.
<a href="https://google.com" title="Google">Google</a>You can also use absolute path or absolute link or external path link for similar website page. Like the website you are working on have a url https://www.webfulcreations.com/ and its inner page is service/ so the url can be generated like.
<a href="https://www.webfulcreations.com/service/" title="Google">Our Services</a>The chances of broken links are very rare in absolute paths. Because you are giving the full path of the page where you are taking user to.
Local links or Relative Links or Internal Links
The local links or relative links are the links which are related to inner pages or images and other resources. In relative links you do not give full path to href=”” attribute you just give the location. To read more about relative links.
Link with same folder file
When you are linking with same folder file the link is really simple. You just provide file name in the href="" attribute and the link is made. See example below. The example is making a link with aboutus.html file which is also in same folder you are making link in file.
<a href="aboutus.html" title="About Webful Creations">About Us</a>Link with File in folder
In case your file to be linked in inside a folder and the folder is in same directory where your current file is. Then you will just put folder name following file name separating both with /. Like if you have more than one services you can create a folder for services. In which you can create different files for each service. And the link will be like below.
<a href="services/ourserviceone.html" title="Fisr Service">First Service</a>So now you know how to enter the folder no matter how many folders are there. You would just simply enter each folder name and separate with / sign.
Going back folder HTML link
What if you have entered in a folder with your relative link but now you want to go back to previous folder with html local link? In this case you would be using ../ double dotes tell to go back to previous folder. If you have to go 2 folders back then you would use ../../ twice. Let’s see example to go back directory with HTML link.
You can say you want to go back to parent directory from inner directory then you would use ../ to go back in html link. You can always use absolute path if the directory structure is complex.
<a href="../aboutus.html" title="Go about us">About Us</a>Above example says go one folder back and find aboutus.html file there and load that file. Practice will make you perfect with HTML file paths. Remember this structure of directories and files will stay with you forever. There are very complex paths also in modern websites.
create links to sections on the same page in HTML
Sometime you have to provide the links to different sections on same page. For example if you are writing tutorial which have several sections and you want to provide a table of content about same page. That table of content will be linked to different sections in same page. So linking to a different section on same page is very simple.
This method is also used to go to top or go to bottom on the same page.
First give an id="" attribute to your section so it can be recognized. Remember ID’s cannot be repeated they are unique on a web page. So always use unique id’s to avoid any conflict on your web page. Let’s see example section below.
<h2 id="ourstory">Our Story</h2>
<p>This is our story text</p>
<a href="#top">Go to Top</a> <!-- Top ID should be defined at top somewhere -->Then to link that section just use # and ID name that link will take user to the section. In section above i have given ourstory id to h2 tag. How to link with this section within same page.
<a href="#ourstory">Our Story</a>Similarly you can create top and bottom links. Like in example above our story section also giving the link to go top. And the top would be defined with id=”top” womewhere at top of web page.
Link to a section on a different page
For linking to a section on a different page first on that page add unique ID to section. For example in aboutus.html we have a section our story. Which we can give ID ourstory. ID cannot have the space.
<h2 id="ourstory">Our Story</h2>
<p>This is our story text</p>Now linking in about us page for the section our story use the following link example.
<a href="aboutus.html#ourstory">Go to our Story in About US Page</a>That’s all for HTML links i have covered everything you should know about the HTML links.
Please watch the video tutorial below do not forget to subscribe and comment.
Download Resources of Part 2:
Download HTML Links Code & Resources
View Code of Part 2 :
Find Previous Lecture:
Find Next Lecture:
Images in HTML – HTML Tutorial – Web Application Development