Hyperlinks are used to navigate between webpages. The hyperlinking of documents creates the web of texts which is the foundation of WorldWideWeb. The hyperlinks create a never-ending set of documents.
We all know that Berners-Lee was the person who had the vision of creating a web of pages. SpringerLink discusses the importance of hyperlinks while mentioning how such a web is more user-friendly than a hierarchical system. It provides a pool of information to the user with such easy navigation.
We can add hyperlinks to text, image, book-marks, tables, e-mail addresses, phones, etc. In this blog, we shall learn why and how, using example code.
We use the <a> tag to indicate the start of the hyperlink and the text is between the opening and closing tags of <a>. The ‘href’ attribute is to indicate the location of the hyperlink. It is the URL.
The alternative name for the hyperlink is the anchor as it connects with the target document. The text between <a> tags is known as “hypertext”. Hypertext is displayed by the browser and it links to the URL written in <a> tag.
<a href= “http://www.html5canvastutorials.com/blog”> Hypertext goes here </a>
The snippet above makes it clear where the hypertext is written. We generally place such snippets in the text between <p> tag. Let’s check with a code:
<html> <head> <title> How to add hyperlinks in HTML </title> </head> <body> <center> <p style= "font-size:32px;"> HTML stands for HyperText Markup Language. <br> <a href="http://www.html5canvastutorials.com/blog/2020/09/what-is-html/"> What is HTML? </a> <br> Try clicking on the text above. Here Hypertext is "What is HTML?" </p> </center> </body> </html>
Here’s how the output will look like:
Images are the heart of modern webpages, it gives life to the page. We already know, how to add an image in HTML. We will use the <img> tag in place of hypertext and link the click to a new website or intra-web. So <img> tag will be nested in <a> tag.
We can also create an image map, which allows hyperlinks to multiple websites or webpages by clicking on different regions on the map. This is achieved by using CSS. For the discussion in this article, we shall limit ourselves to learning hyperlinking the image as a whole.
Let’s see the code:
<html> <head> <title> How to add hyperlinks in HTML </title> </head> <body> <h1> Click on the image </h1> <center> <p style= "font-size:32px;"> Image as a hyperlink <br> <a href="http://www.html5canvastutorials.com/blog"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="How to add hyperlink to HTML"> </a> </p> </center> </body> </html>
Here’s the output:
Hyperlinks on our website add credibility to the content written, researched, or referred. It has the potential to increase the page views by backlinking or interlinking. The browsers use the Search Engine Optimization technique to show a list of websites that match the user’s search. To have a place at the top in this list we need to improve our SEO results and hyperlinks do it.
Hyperlinks can be used as ‘in-text’ headings. It can be used for ‘back to top’, ‘next’, ‘previous’, ‘return to homepage’, etc. These are the ways of intra-page and intra-website navigation which gives a great User Experience(UX).
As we saw in this tutorial, hyperlinks are an integral part of the World Wide Web. They can be used to improve User Experience (UX), navigation, linking relevant pages, SEO & more.
Thus, it becomes inevitable for any web developer to learn this feature. Hyperlinking can be done in many other ways which can be learned once you have reached the intermediate level. For now, we saw how to add links to text as well as images. You can explore your own codes at Codepen.