HTML <link> Tag
In this article, we will cover Tag link with examples. The aim that it would serve the learning requirements.
The HTML <link> tag is used to link external resources, such as stylesheets, icons, and other documents, to an HTML document
A link to an external style sheet is provided here:
Example:
Here an example of the link tag inside the head tag style.css defines how the browser should style the webpage elements and links to previous and next articles:
Example:
Tag link Usage
A Tag link <link> indicates the connection between the current document and an external resource.
The <link> tag is commonly applied to link to external style sheets.
The only content of a link is its attributes. Otherwise, it is an empty element.
Here are some common use cases for the <link> tag:
- The most common use of the <link> tag is to link an external stylesheet to an HTML document. This allows you to define styles in a separate file and apply them to multiple pages on a website. This can help to maintain consistency in design, and make it easier to update the styles across the site.
- The <link> tag can also be used to link icon files, such as favicon.ico files that appear in the browser’s address bar or on tabs. This can help to enhance the branding and visual identity of your website.
- The <link> tag can be used to link other documents, such as XML files or RSS feeds. This can allow users to access additional content or data related to your website.
- The <link> tag can also be used to link external scripts, such as JavaScript files. This can allow you to add functionality to your website, such as interactivity or dynamic content.
- The <link> tag can be used to specify the relationship between the current document and another document, such as an alternate language version or a mobile version. This can help search engines to index and rank your website more effectively.
Attributes List
| Attribute | Value | Overview |
|---|---|---|
| type | media_type | Indicate the linked document’s media type. |
| rel | alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet | It is necessary. Provides details about the relationship between the current document and its linked document. |
| title | Provides a recommended or alternative stylesheet. | |
| crossorigin | anonymous use-credentials | Provides instructions on how to handle requests from cross-origins. |
| href | URL | Provides the URL for the linked document. |
| hreflang | language_code | Includes information about the linked document’s language. |
| media | media_query | Indicates the device on which the linked document will be rendered. |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Provides the referrer to be used when fetching the resource. |
| sizes | HeightxWidth any | Sets the size of the linked resource. For rel=”icon” only |
Attributes
Global
Tag link <link> can also accept Global Attributes in HTML.
Event
Tag link <link> can also accept Event Attributes in HTML.
Browser Compatibility
Most browsers are compatible with the tag link when used for style sheets. Other than that, nothing else is supported.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <link> | Yes | Yes | Yes | Yes | Yes |
Predefined CSS
In many browsers, the <link> element will appear with the following default values:
link {
display: none;
}Advantages of HTML <link> Tag
The HTML <link> tag provides several advantages for web developers, including:
- The <link> tag allows you to separate the presentation of your web page (styles, icons, etc.) from its content. This can make it easier to maintain and update your website, since changes to the presentation can be made independently of the content.
- By linking external resources using the <link> tag, you can reduce the size of your HTML document and improve page load times. This is because the linked resources are loaded separately, and can be cached by the browser for faster access in the future.
- The <link> tag can be used to link external scripts, such as JavaScript files, which can add interactivity and dynamic content to your web page. This can help to create a more engaging user experience for your visitors.
- The <link> tag can be used to specify the relationship between the current document and another document, such as an alternate language version or a mobile version. This can help users to navigate your website more easily, particularly if they are using assistive technologies.
- The <link> tag can be used to provide metadata about your website, such as the author, keywords, and description. This can help search engines to index and rank your website more effectively, and improve its visibility in search results.
