HTML Links Hyperlinks | Docs With Examples

HTML links, or hyperlinks, are one of the fundamental building blocks of the web. They allow users to navigate between web pages, external resources, and different sections of a website. In HTML, links are created using the <a> (anchor) tag, which is a link element responsible for defining absolute URLs, relative URLs, and internal navigation.

Basic Syntax of an HTML Link

It's fair to say that almost every HTML project you choose to work on will need at least one link, so let's look at the basic syntax:

<a href="https://hackr.io">Visit Hackr.io</a>

• href (Hyperlink Reference): Specifies the URL the link points to.
• Anchor Text: The visible clickable text of the link.
• rel attribute: Defines the relationship between the current document and the linked document.
• title attribute: Provides additional information when hovering over the link.

Example: Creating a Simple Link

<a href="https://hackr.io" title="Visit Hackr.io">Go to Hackr.io</a>

This link will redirect users to Hackr.io when clicked. The title attribute enhances accessibility and provides a tooltip when users hover over the link. Open up an HTML editor to see for yourself.

Different Types of HTML Link

Opening Links in a New Tab

To make a link open in a new window or tab, use the target="_blank" attribute.

<a href="https://hackr.io" target="_blank">Open in New Tab</a>

For security reasons, it's recommended to add rel="noopener noreferrer" to prevent potential security vulnerabilities.

<a href="https://hackr.io" target="_blank" rel="noopener noreferrer">Secure New Tab Link</a>

Linking to an Email Address

You can create an email link using the mailto: scheme.

<a href="mailto:someone@example.com">Send Email</a>

Clicking this link opens the default email client with a new message.

Linking to a Phone Number

Use the tel: scheme to allow users to call a number directly from their mobile device.

<a href="tel:+1234567890">Call Us</a>

Internal Links (Another Page on Your Website)

Internal links connect different pages within the same website using relative links.

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

This assumes that about.html exists in the same directory.

Linking to a Specific Page Section

You can link to a specific section of a webpage using an ID-based anchor link.

<a href="#section1">Jump to Section 1</a>

Then, assign the id attribute to the section you want to navigate to:

<h2 id="section1">Section 1</h2>

Adding a Downloadable Link

Use the download attribute to allow users to download a file when they click the link.

<a href="file.pdf" download>Download PDF</a>

Styling Links with CSS

You can style links to change their appearance.

a {
    color: blue;
    text-decoration: none;
}
a:hover {
    color: red;
}

• color: Changes the text color.
• text-decoration: none;: Removes the underline.
• hover: Changes the color when the mouse hovers over the link.

Common Questions About HTML Links

How do you create a link in HTML?

To create a link in HTML, use the <a> tag with the href attribute:

<a href="https://hackr.io">Visit Hackr.io</a>

This makes "Visit Example" a clickable hyperlink.

How to make a URL a link?

To turn a URL into a clickable link, wrap it inside an <a> tag:

<a href="https://hackr.io">https://hackr.io</a>

Now, clicking the link will open the specified destination.

How to code a clickable link?

A clickable link in HTML is created using the <a> tag. You can specify both the absolute URL or relative URL and the text that will be displayed:

<a href="https://hackr.io">Click Here</a>

You can also use an image as a clickable link:

<a href="https://hackr.io">
    <img src="button.png" alt="Click Here">
</a>

Key Takeaways

• HTML links use the <a> tag with the href attribute.
• The target attribute controls where the link opens.
• The title attribute provides extra information about the link.
• You can create external, internal, email, phone, and downloadable links.
• The target="_blank" attribute opens links in a new window or tab.
• Anchor links (#id) allow navigation within the same page.
• CSS can be used to style links for better user experience.

Wrapping Up

HTML links are essential for navigation and connectivity on the web. Understanding how to use different types of links effectively improves user experience and accessibility. Whether linking to another page, an email, or a downloadable file, mastering link elements is key to effective web development.

Plus, ensuring proper use of absolute URLs, relative URLs, target attributes, and rel attributes will help create well-structured, accessible, and efficient webpages.