Today’s topic is How to create Links in HTML. Links are crucial to connect things, a link in a webpage is often used to point to another document. Links may also be used to link to different parts of the same webpage.
How to create Links in HTML
Creating links on the website is very needful thing. Website is a website because it has links in the webpage. Without link on a webpage it is just a webpage.
A simple Hyperlink
HTML links are called Hyperlinks and it is very easy to create a link. We use the anchor tag for creating links and you can see an example below.<a href="https://www.theitstuff.com">Click here</a>
This will give a very simple output with the Click here text as a hyperlink and when you click on it, you will be redirected to the homepage of this very website as we have supplied it in the href attribute.
Now the link would actually open up in the same tab and replace your current page. But if you wish to open it up in another tag you will have pass another attribute called target="_blank".
<a href=”https://www.theitstuff.com” target="_blank">Click here</a>
Links are not just limited to simple texts but you can also create links to any other elements like images or heading or videos as well. Here is an example where have used an image as a hyperlink.
When I click on the superman image in the webpage above, I will be redirected to the respective linked webpage. The code for the following can be achieved by nesting the image tag within the anchor tag,
<a href="https://www.theitstuff.com"><img src="superman.jpg"></a>
You can do that for pretty much any element and it works just fine. Now let us see internal linking.
Linking to the same page
At times, you might want to create links that point to different parts of a really long page, Much like shortcuts to different sections of the same page. So this will require a concept of ids. We will be studying more about ids in the next article. But for now, an id is a unique identifier that can be given to HTML elements.
Just look at the following code example.
<p><a href="#computer">Computer</a><a href="#car">Car</a><a href="#airplane">Airplane</a><a href="crocodile">Crocodile</a><a href="#developer">Developer</a><a href="#dancer">Computer</a></p><h1 id="computer">I am a computer who likes to computer</h1><br><br><br><br><br><h1 id="car">I am a car who likes to travel</h1><br><br><br><br><br><h1 id="airplane">I am an airplane who likes to fly</h1><br><br><br><br><br><h1 id="crocodile">I am a crocodile who likes to hunt</h1><br><br><br><br><br><h1 id="developer">I am a developer who likes to act like i am working</h1><br><br><br><br><br><h1 id="dancer">I am an Dancer who likes to Dance</h1>
When I click on the links that I have created, The focus of the window is moved to the element which has been linked. It is very important that you give your elements a unique id to avoid clashes and make sure you add the # sign before linking the id in the anchor tag.
Conclusion
Linking of other web pages is of extreme importance and HTML offers support for the anchor tag. Not only text but almost every element can be used as a link. We can also create links to the same page by using the concept of Ids. If you have any query related to this topic drop it in the comments section and I’ll be there for you.
