HTML Links Hyperlinks

Sometimes, while scrolling through a blog on the web, you might find highlighted blue text, and clicking on that text jumps you to another page in a new or the same browser tab. This is nothing but an HTML link. Links are also known as hyperlinks. Links in the browser help us to connect pages, websites, files, and even some specific sections of the webpage, thus making information easily accessible. In this blog, you are going to learn everything about the links in HTML, how to create a link using the <a> tag in HTML, and best practices while creating links in HTML.

Table of Contents:

• HTML Links
• The <a> Tag Attributes
• The target Attribute
• Types of Links in HTML
  1. Internal Links
  2. External Links
• Link to Other HTML Elements
• Best Practices
• Browser Compatibility
• Conclusion

HTML Links

Hyperlinks in HTML are the text elements that, when clicked, immediately navigate users to another page. Links in HTML are created using the <a> tag (short for anchor). Here is the basic structure of the <a> tag in HTML:

Syntax:

<a href="https://intellipaat.com/">Intellipaat</a>

Here, you are creating a link using the anchor ( <a> ) tag in HTML. When the user clicks on Intellipaat, the browser can navigate the user to the official website of Intellipaat. Let us understand each and every element one by one:

• <a>: Opening anchor tag
• href: This attribute is used to specify the destination of the link.
• Link Text: Clickable text that is visible to the users.
• </a>: Closing anchor tag

The <a> Tag Attributes

Attributes in HTML are some additional properties that define the appearance of the HTML elements. Here are some of the attributes that are commonly used with the <a> tag in HTML.

1. href: Used to define the path of the URL.
2. target: Used to specify where to open the linked document.
3. title: Used to add extra information that only displays when the user hovers over the link.
4. download: It forces the browser to download the file instead of opening it.
5. rel: It helps us to define the relationship between the current page and the linked page.

Become a Job-Ready Web Developer in Just a Few Months

Join Our Web Dev Course

Explore Program

The target Attribute

The target attribute in the <a> tag is used to specify where to open the linked documents. Here are some of the values and their meaning:

Example:

Output:

Explanation: In this example, you are creating a link using an anchor tag and setting the target attribute value to _blank. This will open the file in a new tab of the browser.

Types of Links in HTML

Links in HTML are used to navigate users from one page to another. There are two types of links in HTML:

1. Internal Links

Internal links are used to point to another page or another section of the same website. These links help users navigate between different pages of a single website or even jump to different sections of the same page.

Syntax: Link to another page on the same website:

<a href="/about.html">About Us</a>

Syntax: Link to a section on the same page:

<a href="#contact">Go to Contact</a> // Link
<h2 id="contact">Contact Us</h2> // Target

2. External Links

External links are used to point to a page on different sites. These links take users away from your site and redirect them to another site or online resource.

Syntax: 

<a href="https://www.example.com" target="_blank">Visit Example</a>

Link to Other HTML Elements

Links in HTML are not only used to link documents, videos, and images, but it is also used to link various elements. Here are some of the elements with their syntax to link:

Best Practices

Here are some of the points that you need to follow while creating the links in HTML:

• Use clear link text: It is good practice to write short and descriptive link text.
• Make links accessible: It is good to ensure that your link text makes sense according to the context.
• Secure new tab links: If you want to open a link in a new tab by using the target=”_blank”, then it is good to add rel=”noopener noreferrer” in order to keep your website safe from security risks.

Browser Compatibility

HTML links are accessible to all modern browsers, so there’s no need to worry about browser compatibility while using the basic HTML Links:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari
• Opera

All these browsers support the hyperlink created by using the <a> tag in HTML.

Conclusion

HTML links are simple but very important in web development. They help you to connect different websites, videos, and help users move easily from one place to another. Learning how to create links is one of the important skills that help you build a website.

Links in HTML – FAQs