Types of Links in HTML with Examples

In this tutorial, we will understand how to create different types of links in HTML with the help of examples.

Links, technically known as hyperlinks, are the very essence of the web, because they are the feature that enables interconnection between pages and browsing, without which the web would be non-existent.

Links are the fundamental element of the web that links from a page to another website, from a page to another page on the same website, from a part of a page to another part on the same page, etc.

Some of the most common types of links in HTML are as follows:

Internal links
External links
Email links
Telephone links
Download links
Image links
Bookmark links

The element used to create all these types of links is the anchor <a> element. The element defines an anchor, but not the hyperlink. The hyperlink reference attribute, href, and a value (which must be a URL) are required to do this. Let’s understand the basic definition of each link and its syntax one by one.

Internal Links

Linking a page to another page on the same website is called internal links. In other words, creating a link to various sections of the same website is called internal linking in HTML. Internal links connect different web pages or resources within the same website, helping users navigate the website and allowing search engines to crawl and index the site more efficiently.

These links are typically used in the website’s navigation menu, in the content as text links, or as part of a site map. They are crucial for website structure and can significantly affect the user experience and SEO. Internal links can either point to different pages within the same website or to different sections within the same page.

There are two types of internal linking: absolute and relative. We often use relative paths or addresses when we need to connect different web pages on the same website or domain. This is because they are shorter and more flexible, making website maintenance easier.

If your website’s domain name changes, the links will still work without needing to update the domain part of each link.

Example 1: Linking to another page within the same website using relative paths

<a href="/about.html">About Us</a>
<a href="/contact-us.html">Contact Us</a>
<a href="/download.html">About Us</a>
<a href="/support.html">Support</a>

If anyone clicks on the above links, the browser will automatically change the relative URL into fully specified absolute URL and the correct web page will be retrieved.
[adinserter block=”5″]

Bookmark Links

Linking to a section within the same web page is called within-page linking in HTML. It is often referred to as bookmark linking.

Bookmark links allow the users to jump to specific parts or sections of a webpage without reloading the page. It is especially useful when having a long web page because it improves navigation by allowing direct access to the section that users are interested in.

We use a fragment identifier with anchor tags (<a>) when linking to different sections within the same page. A fragment identifier is a URL component that specifies a section of a document, marked by an id attribute on any element. When users click on this link, the browser will scroll to the section of the page with the corresponding id attribute.

Example 2: Using id attribute

<!DOCTYPE html>
<html>
<head>
     <title>Linking to sections within the same page using id attribute</title>
</head>
<body>
<!-- Link to Section 1 -->
<p><a href="#section1">Go to Section 1</a></p>

<!-- Link to Section 2 -->
<p><a href="#section2">Go to Section 2</a></p>

<!-- Some content -->
<p>This is some text before the sections...</p>

<!-- Section 1 -->
<h2 id="section1">Section 1</h2>
<p>This is the content of Section 1.</p>

<!-- Some more content -->
<p>This is some text between Section 1 and Section 2...</p>

<!-- Section 2 -->
<h2 id="section2">Section 2</h2>
<p>This is the content of Section 2.</p>
</body>
</html>

Output:

In this example, clicking on “Go to Section 1″ will make the browser scroll to the content of Section 1, and similarly for Section 2.
[adinserter block=”2”]

Best Practices for Linking to Different Sections within Same Page

(1) Use Descriptive ID: Choose id values that are descriptive of the content they’re marking to improve readability and maintainability of your code.

(2) Uniqueness ID: Each id must be unique within the HTML document to avoid confusion about which section the link should navigate to.

(3) Accessibility: Use meaningful text for link descriptions to enhance accessibility.

Linking to a section within the same page enhances user experience by facilitating quick and easy navigation to relevant content.

Using the # symbol alone as the value of the href attribute in an anchor (<a>) tag creates a link that, when clicked, leads back to the top of the current webpage. Since the browser doesn’t find a specific element or section with an id that matches after the #, it by default navigates to the start of the webpage.

Example 3:

<a href = "#">Back to Top</a>

Linking to a Specific Part on Another Page

We can link to a specific section of a page, whether on the same website or a different one, using the same technique as used above. All that is required is to add a unique identifier to the end of the link to the page. The URL can be relative or absolute. If the page in on the same website, then we can use relative URL. But if the page is on another website, it has to be absolute.

Example 4: Linking within the same website

Suppose we want to link to a section titled “Team” on the “About Us” page on a website. The target element must have a unique id (# followed by the id value) that matches the identifier used in the link. The link might look like this:

<a href="/about-us.html#team">Meet Our Team</a>

Example 5: Linking to section of a different website

To link to a specific part or section of a page on another website, we use its full URL (i.e. absolute URL) with the fragment identifier. If the external site has a section “Pricing” with an id of pricing, the link would be:

<a href="https://www.externalsite.com/services.html#pricing">View Pricing</a>

By understanding and applying all internal linking techniques, you can create more structured, user-friendly web pages that allow for easy navigation to specific content, regardless of whether the target content is on the same page, elsewhere on the same website, or on a completely different website.

External Links

Linking two webpages that belong to different websites or domains is referred to as external links in HTML. They are used to direct users from one site to another distinct site, which is not part of the same domain as the originating page.

We use absolute path (fully specified URL) to connect two webpages that are hosted on different domains (or websites) because they provide the complete path to the web page or resources located on different domains.

Attributes Commonly Used with External Links

href: Specifies the URL of the page the link goes to.

target: An attribute often set to _blank for external links to open them in a new tab or window. However, this is not mandatory but is a common practice to improve user experience by keeping the original page open while exploring linked page.

rel: An attribute that can have several values but noopener noreferrer is recommended for external links with target=”_blank” to enhance security and privacy.

Example 6:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>External Link Example</title>
</head>
<body>
    <p>For more information, visit <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Example Website</a>.</p>
</body>
</html>

This example provides a straightforward way to create external links in HTM. In this example, we have created an external link using an <a> element. The href attribute is set to URL pointing to an external site.

The target=”_blank” attribute opens the link in a new tab or window. The rel=”noopener noreferrer” attribute enhances security by preventing the newly opened page from accessing the originating page’s window object.

Best Practice for Creating External Links

When creating external links in HTML, some best practices not only improves the overall experience for the users but also enhances the security and effectiveness of your website. Here are several best practices to consider:

Use descriptive text link that will give an idea of where the link will take the user or what kind of information they can expect. Attempt to avoid vague text like “click here.”
Open external links in a new tab or window using target=”_blank”.
When using target=”_blank”, also use rel=”noopener noreferrer” for external links.
Regularly check your external links over time to ensure they are not broken links.
Use URLs that are meaningful and readable. This can help with SEO and makes it easier for users to trust the links.
Avoid linking to malicious or low-quality sites. The quality and safety of the sites you link to can reflect back on your website. Linking to reputable, secure sites helps build trust with your users.
Use rel=”nofollow” for links that you don’t want to endorse. This tells search engines not to pass along ranking credit to the linked site.
Test that external links work well and are easily clickable on mobile devices.

Email Links

In HTML, email links, also known as “mailto” links, allow users to click a link that opens their default email program with a pre-populated recipient address. These hyperlinks can also have optionally subject line, body text, and other fields.

To create email links, we use <a> tag or element. The value of href attribute starts with mailto:, followed by the e-mail address to which you want the message to be sent. The simplest form of an email link just includes the recipient’s email address:

<a href="mailto:deepak@example.com">Email me at:</a>

When the user clicks on this link, the user’s default email client (program) will open with the “To” field set to “deepak@example.com”.

Email Link with Subject

We can also pre-populate the subject line by adding ?subject= followed by the desired subject text:

<a href="mailto:deepak@example.com?subject=Feedback">Send Feedback</a>

When the user clicks on this email link, it will open the user’s email client with the “To” field set to “deepak@example.com” and the “Subject” field pre-populated with “Feedback”.

Example 7:

<!DOCTYPE html>
<html lang="en">
<head>
     <title>Examples of how e-mail links are created in HTML</title>
</head>
<body>
    <h3>Basic Email Link</h3>
    <p>Email me at: <a href="mailto:deepak@example.com">deepak@example.com</a>
    <h3>Email Link with Subject</h3>
    <a href="mailto:example@example.com?subject=Feedback">Send Feedback</a>
</body>
</html>

Output:

Email links provide a convenient way for users to send emails directly from a webpage. By customizing the mailto: link, we can specify recipients, subject lines, and even pre-defined body text.

Telephone Links

Telephone links in HTML allow users to initiate a phone call by clicking a link, which can be particularly useful on mobile devices. To create a telephone link in HTML, we use anchor <a> tag. The value of href attribute starts with tel:, followed by the telephone number with country code and a “+” prefix.

When a user clicks on this telephone link, the device’s default phone app is launched, and the specified phone number is pre-loaded, allowing the user to call the number with minimal effort. The basic form to create a telephone link in HTML is as:

<p>To speak with a representative, please <a href="tel:+1234567890">Call Us</a>.</p>

Download Links

Download links in HTML are used to allow users to download files directly from a webpage. These can include documents, images, software, PDFs, and more. The basic syntax for creating a download link involves using the anchor <a> tag. The value of href attribute contains the URL of the file you want to make available for download.

<a href = "URL_to_the_file">Download File</a>

Image Links

Image links in HTML is a clickable image that directs the user to another web page, file, or resource. It is the combination of an image <img> tag and an anchor <a> tag. An example of creating an image link is as:

<a href="https://www.example.com">
   <img src="/images/logo.png" alt="Website logo">
</a>

In this example, the anchor <a> tag defines the hyperlink with the href attribute specifying the URL to which the link should go. An <img> tag placed inside the <a> tag displays the image that users will click on. The src attribute specifies the path to the image you want to display on the web page. The alt attribute provides an alternative text that describes additional information about the image.

In conclusion, HTML provides a versatile set of linking mechanisms that enhance the navigability and interconnectivity of content or web pages on the web. Understanding the different types of links and their applications in HTML is essential for creating efficient, user-friendly web pages and websites. Hope that you will have understood the basic definition and syntax of each type of links and practiced all examples.
Happy coding!!!