How to create links in HTML

Creating links in HTML is an essential skill in web development. Links, or hyperlinks, enable seamless navigation between pages, websites, or even different sections of the same document. This answer will walk you through the basics of creating and optimizing links in HTML.

What is a hyperlink?

A hyperlink is a reference that connects one resource to another. These resources can be web pages, documents, email addresses, or specific elements within a page. Hyperlinks make it easy for users to access related information or navigate a website effortlessly.

The foundation of any hyperlink in HTML is the <a> tag, also known as the anchor tag. It specifies the location of the resource being linked through the href attribute.

Syntax to create hyperlinks

Here’s the basic syntax of an HTML hyperlink:

In the syntax above, we create a clickable link that takes the user to https://educative.io when clicked.

Let’s look at a simple example of how the <a> tag works on a web page. The text "Educative" will appear as a clickable link.

Attributes of the <a> tag

The <a> tag supports various attributes that enhance its functionality and user experience. Let's look at the most commonly used attributes:

The href attribute

The href attribute specifies the URL of the page or resource you want to link to. It is the most important attribute of a hyperlink.

Without the href attribute, the anchor tag does not create a functional link.

The target attribute

The target attribute defines where the clicked link opens. By default, it is opened in the current browser window. The target attribute can have the following values:

• _self: Default. Opens the link in the same window.

• _blank: Opens the link in a new window.

• _parent: Opens the link in the parent frame.

• _top: Opens the link in the full body of the window.

Let's look at an example of using _self and _blank values for the target attribute.

The title attribute

The title attribute in the link tag in HTML is used to specify extra information about an element, if any. The information appears in the form of a tooltip that appears when users hover over the link:

The rel attribute

The rel attribute is used to specify the relationship between the current page and the linked resource. Common values include:

• nofollow: Tells search engines not to pass SEO ranking influence to the linked page.

• noopener: Prevents the new page from accessing the window.opener object (for security).

• noreferrer: Prevents passing referrer information to the linked page.

Absolute URLs

An absolute URL contains the full path to the resource, including the protocol, domain name, and file path. These URLs are often used for external links or resources. Absolute URLs work consistently, regardless of the location of the current page, and are ideal for linking to external websites. We can use absolute URLs for linking to external websites or resources.

Relative URLs

A relative URL provides a path to the resource relative to the current page. These are commonly used for internal links within the same website. Relative URLs are shorter and easier to write, and they are automatically adjusted if the domain changes. We can use relative URLs for navigating within the same domain.

Anchor links

Anchor links, or jump links, allow users to navigate to specific sections of a page. These are particularly useful for long web pages with multiple sections, such as FAQs or tutorials.

To create an anchor link, you need two parts:

1. A target element with an id attribute.

2. A link that references that id.

Here’s an example of an anchor link that navigates to a “Contact Us” section on the same page:

In the code above, you can see that we used the id attribute on the target elements to link sections within the page. We then reference the target elements in the href attribute preceded by a hash (#). To allow users to return to the top of the page, we set an id on a top element (<nav>).

Creating links in HTML is an essential skill for web development that enables seamless navigation. By understanding the basics of the <a> tag and its attributes, you can build functional and user-friendly websites.