Understanding HTML Text Links and How To Use Them

In this article, we will be looking at how to insert text links in web documents using HTML. In our previous tutorial, we discussed about how to insert list into web documents using HTML. If you haven’t gone through the tutorial, you can do so using the link below

READ PREVIOUS: How To Insert LIST In Web Document Using HTML

Table of Contents

Introduction to HTML Text Links

In most cases, developers come across need to include text links in their web pages. This links can lead to other web pages on the website or can lead to other web pages on another websites. No matter what the case may be, this tutorial, will guide you on how you can easily achieve this.

How to link a web document to another web document

The easiest way to link a web document to another web document, is by using the anchor tags (<a> & </a>). The descriptive text on the link, should be placed in between the opening and closing tags as shown below

<a href = "URL Of Document " ... HTML attributes-list>NAME OF Link Text</a>

Example

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>HTML LINK Document</title>
</head>
<body>

   <a href="https://themustfeed.com"  target="_self"  >document link</a>
   
</body>
</html>

Result on web browser

HTML LINK Document document link

In the above example, we added a new attribute known as target. This attribute informs the web browser on how the link should be viewed. values that can be added to the target attribute are shown below

HTML ATTRIBUTE	Attribute Description
_self	This html attribute opens the link web page in the same web browser tab.
_blank	This html attribute opens the link in a new web page on the same web browser
_parent	This html attribute opens the linked page using the parent frame.
_top	This html attribute opens the linked document on a full window on the same browser

Example showing all types of link attributes

<!DOCTYPE html>
<html lang="en">
<head>
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>

   <a href="https://themustfeed.com/"  target="_self"  >HTML SELF ATTRIBUTE </a> 
   <a href="https://themustfeed.com/"  target="targetframe"  >HTML TARGET FRAME ATTRIBUTE </a>
   <a href="https://themustfeed.com/"  target="_top"  >HTML TOP ATTRIBUTE </a>
   <a href="https://themustfeed.com/"  target="_parent"  >HTML PARENT ATTRIBUTE </a>
   
</body>
</html>

RESULT ON WEB BROWSER

Document HTML SELF ATTRIBUTE
HTML TARGET FRAME ATTRIBUTE
HTML TOP ATTRIBUTE
HTML PARENT ATTRIBUTE

ADDING COLORS TO HTML LINKS

Another amazing thing we can do to the HTML links is by adding colors to them. Sometimes you might want to ensure the link colors fits the content of the web page, HTML allows us to do this using the style attribute as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Ebook Document</title>
   <base href="https://themustfeed.com/">
</head>
<body alink = "#EE0000" link = "#551A8B" vlink = "#0000EE" >

   <a href="/html/text/downloads.html"  target="_self"  >document ebook</a>
   
   
</body>
</html>

Result on web browser

Setting up Download Links

We can set up download links on our web page using the same similar ideas we have been using earlier on as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   
   <title>Ebook Document</title>
   <base href="https://themustfeed.com/">
</head>
<body  >

   <a href="/html/text/downloads.html"  target="_self"  >DOWNLOAD </a>
   
   
</body>
</html>

Result on web browser

Ebook Document DOWNLOAD

Conclusion

In the above tutorial, we explained the basic method of inserting text links into the web document using HTML. if you have questions, kindly let us know using the comment section below

NEXT TUTORIAL: BASICS OF HTML IMAGE LINKS