HTML Links

I am sure we have all been to websites and seen blue text which takes us to another website when clicked on. Ever wondered how it all works? It is all thanks to HTML links. These links connect the different websites with one another.

In this tutorial, I will take you through the different concepts of HTML links to provide a brief understanding of the concepts.

HTML links are elements that enable users to move between web pages or sections of a web page. The HTML hyperlink tag is used to establish these links, and the href attribute specifies the URL or destination. Links are frequently shown as clickable text or images, and they play an important role in website navigation and engagement.

Syntax of HTML links

We predominantly use the anchor tag or the <a> tag to link other documents in HTML. Now that we know what linking in HTML is, let us look at how to create HTML link.

We will take a look at a snippet of an HTML link code to understand how to use HTML links.

Look closely at the anchor tag(HTML hyperlinking tag). We have put the content inside as “Visit Example Website” where we have put the target website as  "https://www.example.com”.  Similarly, we can link other elements in the same web page or different web pages inside the same website. We will look at this example further in the tutorial.

Different Types of HTML Elements and How to Link Them

In this section, we will look at different HTML link type and how to link them to other documents inside or outside the same web page.

Headings

Let us first look at an example of how to hyperlink a heading in HTML.

Code:

In the above example, we have two headings and two paragraphs. In the above example, we have hyperlinked This part to "https://example.com/”. We have linked the subsequent paragraphs to the first two headings in order. We have hyperlinked paragraphs “Go to This Part” and “Go to That Part” to their subsequent counterparts.

Paragraphs

Here we will see how to hyperlink paragraphs and how to link other parts of the web page to a certain paragraph. This is one of the most common HTML hyperlink text used. Let us look at the example now.

Code:

In the above example, we have linked the paragraph “This is the content of the hyperlinked section” which is linked to "https://example.com/.

Images

Here we will learn how to hyperlink image (HTML). Let us look at an HTML hyperlink example to learn the concept better.

Code:

In the above example, we have hyperlinked the image to an external HTML link. The image if clicked on takes you to https://example.com/.

Buttons

Another integral HTML element that needs a button HTML link. Here we will see how to button HTML code with link is connected to another document with the help of an example.

Code:

In the above example, the button will take you to the example website when clicked on. We can configure the button to take us to a different part of the same website as well.

We can also configure the button to a specific email. In this case, when the button is clicked on, it takes you to an external site to send an email. Let us look at an example.

Code:

In the above example, when the button is clicked, it takes you to the email platform to send an email to email@example.com. The HTML email link of this website is hyperlinked with the button.

How to Use the Target Attribute?

The target element in HTML specifies where the linked content should be shown when the user clicks on it. It can be combined with the <a> (anchor) element to open the linked content in a new window or tab, or a specific frame or iframe. Let us see how to use the target attribute in different situations and their syntaxes.

Open in a new window or tab (_blank)

In this variation, when the user clicks on the hyperlinked element, it takes the user to a new window and opens the targetted web page. Let us look at the syntax.

<a href="https://www.example.com" target="_blank"> Link Text </a>

Open the Parent Frame (_parent)

In this use case, it opens a link in the parent frame with the target="_parent" property. The following is the HTML syntax for this type. 

<a href="https://www.example.com" target="_parent">Open in Parent Frame</a>

Open in a Named Frame (_top)

In this case, when a user clicks on this link, it opens https://www.example.com in the top-level browsing context, replacing any existing frames or iframes. Let us look at the syntax.

<a href="https://www.example.com" target="_top"> Open in Named Frame </a>

Open in a Specific Frame (with the frame's name)

This concert is best understood with the help of an example.

First, we define the frame in our HTML file.

<iframe src="about:blank" name="framename"></iframe>

Then we create a link in the website that targets the iframe.

In this case, when a user clicks on this link, it opens https://www.example.com in the frame named "framename" if it is present in the current page's frame structure.

Open in an iframe (with the iframe's name)

In this type of usage, a target attribute is used to load content from a specific URL into an iframe element on a web page by targeting that iframe using its name attribute. Let us look at an example.

First, we define an element in our iframe.

<iframe src="about:blank" name="myiframe" id="myiframe"></iframe>

Then we create a link to target the iframe.

<a href="https://www.example.com" target="myiframe">Open in Iframe</a>

If you want to improve your software development skills, I highly recommend checking out software development online courses. They offer structured learning experiences to help you master key concepts, techniques, and tools in this field.

In Conclusion

In this tutorial, we have learned how to link other elements of the web web page and entirely other websites. Linking is an important concept to learn in HTML. This tutorial was aimed to provide a basic understanding of how to link items in HTML.

There is much more to learn, and more complex concepts to learn in HTML programming other than HTML links. I would always recommend checking out courses from certified platforms. One that comes immediately to mind is upGrad. Their courses are in collaboration with some of the best universities around the world and curated by some of the best professors.

Frequently Asked Questions

1. How to create an HTML link?

To create HTML link, we use the anchor tag. We put in the address of the web page we want to reach in the href attribute.

2. What does the href attribute do?

HTML's href attribute stands for "hypertext reference." It provides the URL or location of the resource that the link should direct to when clicked.

3. How many links in HTML?

There is no established restriction on the number of HTML links in a document. You can include as many links as necessary to connect different sections of your material or to external resources. 

4. What is HTML in URL?

In a URL, "HTML" usually refers to the file type of a webpage. When you see ".html" in a URL, it means that the webpage was created using HTML (Hypertext Markup Language), the standard markup language for building web pages and documents for display on the internet.

5. What are the three types of links in HTML?

The three types of HTML links are internal links, external links, and anchor links. All three types of links serve different purposes.

6. How do I open an HTML link?

To open HTML links, simply click it. When you click on an HTML link, the browser opens the linked URL in a new tab or window, depending on your browser settings and whether the link is set to open in a new window/tab via the target attribute in HTML.

7. Are there any best practices for using HTML links?

Yes, here are some best practices for using HTML links:

• Use descriptive anchor texts.
• Avoid generic terms such as "click here."
• Include a title attribute to provide more information.
• Use the target attribute carefully.