Link Tag – <link>
The <link> tag in HTML is used to define a link between the HTML document and external resources. The links defined by the <link> tag differ from the hyperlinks defined by the <a> tag. The <a> tag is used for human users while the <link> tag is used for machines.
Key usages of the <link> tag
There are multiple purposes that can be achieved using the <link> tag. The most important ones are:
- Adding a link to CSS documents (style sheets)
- Adding a link to favicon source data
It is also used for other purposes such as linking to mobile pages, other language pages, or adding information for SEO (Search Engine Optimization).
The <link> tag is placed in the <head> section of the document. As the <link> element is a void element, there is no content and closing tag.
Linking to CSS documents
There are two types of sources of CSS documents (style sheets):
- CSS documents in the project directory – your own custom CSS files or external CSS files downloaded
- CSS documents on the internet provided by external services
Linking to CSS documents in the project directory
There are two attributes you need to specify:
- rel: defines the relationship between the current document and the linked document. For CSS, specify
rel="stylesheet". - href: defines the location of the linked document
Here is an example of the <link> tag when your CSS file named custom.css is located under the css directory
<head>
:
<link rel="stylesheet" href="css/custom.css">
:
</head>
Linking to CSS documents provided by external services
If you have a CSS document locally downloaded from external services, you can take the first approach – placing the document locally and specifying the file location in the <link> tag.
Usually, the external services provide CSS document access through their CDN (Content Delivery Network) servers. For example, the popular services to build websites such as Bootstrap, Google Fonts or Font Awesome provide a URL of their CDN links. CDN may sound too technical for beginners; however, using it is quite simple.
Here is an example of the link to Google Font for Roboto font family. What you need to do is select a web font on the Google Font website, copy the link to the font, and paste it into the header of your HTML document.
<head>
:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
:
</head>
We'll explain Web Font in detail later (Web Font and Google Font ).
Linking to favicon source data
Favicon is an icon associated with a particular website, typically displayed in the browser tab. To create a favicon, you usually need to use external services. We'll explain how to create a favicon later in this course (Favicon ). What you need to understand here is that the <link> tag is used to add links to favicon source data.
You can also learn this topic offline. Click 
.
More Topics to Explore
Layout Key Design Points
App UI Design Basics: How To Design App UI
