What is the HTML Link Tag and How To Link HREF Link Tag?

Home >> Blogs >> What is the HTML Link Tag and How To Link HREF Link Tag?

HTML Link tag is one of the important HTML tags and is used to link one page to another. In this article, we will learn what an HTML <link> Tag is and how it is used in HTML. So scroll down to find all the details.

What is a Link?

A link is a clickable text that allows you to navigate between one page or another of the same website. There are numerous techniques to build links in web development, but the most frequent one is utilizing tag and href characteristics. This is the last place to provide the link’s destination. A tag helps us build three primary links: an internal connection, an external connection, and an anchor link. That said, in the following part, we can now learn how to build an internal link.

What is a HTML Link Tag?

The HTML link tag is used to establish a link between a Web page and an external resource when written in HTML. For example, for navigation purposes, it is useful to define a frame or, in general, to link a CSS file to alter the website layout and appearance. The sections below provide information on this tag, including an example of its code and associated properties and browser compatibility.

Example of <link> code

Attributes of HTML Link Tag

A given aspect of an HTML element is dictated in an attribute. All tags support standard attributes, consisting of the name and value pair. The list below shows the entire current unique <link> HTML tag properties, and each one is described.

Cross-origin: Describes how pictures are collected.
Href: Describes where the linked document is located.
Hreflang: In a linked document, you specify the text language.
Media: Identifies the device that displays a connected document.
Rel: Describes the relationship between the current and a related document (required).
Sizes: Describes the associated resource size. Just for use with rel=” icon.”
Type: In a linked resource, the type of media is specified.

Deprecated Attributes

A deprecated attribute may work but cannot be supported in the future. Although the attribute works with the current HTML version, it will be phased away shortly. To ensure your website is future-proof, you best avoid using these properties. The list of deprecated attributes is given below

Charset: Describes how characters are encoded in a linked document.
Rev: Designates how a connected document relates to the current document.
Target: Describes where the connected resource should be loaded.

Compatibility of HTML <link> tag

HTML <link> tag is supported by various internet browsers. The list of the supported internet browsers are:

Edge: All versions
Internet Explorer: All versions
Firefox: All versions
Safari: All versions
Opera: All versions
Chrome: All versions

HTML link Tag href Attribute

A website is a web page collection. And there is something to link or connect these pages. To do this, we have to utilize an HTML tag: <a> tag. This tag defines a connection that connects from page to page. The HTML link tag HREF attribute, indicating the destination of the link, is the most significant attribute for an element.

How to Build Internal Links?

It makes sense to establish a connection between pages when it comes to designing a website. The links are termed the internal link (since it is always in the same domain name or website) and allow us to travel from page A to page B. Therefore, there is an internal connection that allows you to browse another website page. One of the examples is given below:

folder1
page2.html
page1.html
index.html

Here we have three situations of application, and an example is provided for each of us. Browse to pages on the same level.

index.html

As you can see, page 1.html is the same; hence the href attribute’s path is the page’s name only. Browse to pages located in another folder

page1.html

<a href=”./folder1/page2.html”>Browse to Page 2</a>

We’ve got another case here as we don’t currently have the same level on our page to visit. And to navigate to that page, the entire path of the file, including the folder, should be specified. Now let’s go into the case of last use. Browse from the page located in a root folder

page2.html

<a href=”../index.html”>Browse to the Home Page</a>

We must first go to one level to travel to the index.html page before we may browse to that page.

How to Build External Links?

The option to browse external websites is always beneficial.

<a href=”https://www.google.com/”>Browse to Google</a>

We must specify its URL in the href property to navigate to Google, as you can see above. The navigation between page A and page B is using external and internal links. If you wish to stay on the same page and browse to a certain portion, and to do this, we must employ something that we call the anchor link.

How to Build Anchor Links?

An anchor connection is a more precise one: it allows us to browse the same page while staying on point A to point B. It can also be used to access a component on a different page. Navigate on the same page

<a href=”#about”>Go to the anchor</a>
<h1 id=”about”></h1>

This one is somewhat different from the others. It works the same way, indeed, but always. We have a reference to an element instead of a page link. If the link is clicked, an element with the same name will be looked for without a hashtag (about). It browses into that section if it finds the id.

Navigate on another page
<a href=”page1.html#about”>Go to the anchor</a>

This is quite the same as the previous example, except that the page in which we wish to navigate must be defined and the anchor added.

Final words

This was all about HTML link tags and how to use them in HTML. The HTML link tag HREF is the main feature of a tag. It allows us to browse between pages or only a particular section of a page. Hope you have well understood the concept of the HTML <link> tag.