In HTML, the link tag is a self-closing element, usually located in head section of the document. It is used to establish associations with external resources, such as style sheets, icons, etc. The link tag has multiple attributes, of which rel and href are the most commonly used.
The rel attribute defines the relationship between the current document and the linked resource. Common rel attribute values are:
stylesheet : Represents a link to an external CSS stylesheet. icon : represents an icon linked to a website, such as a favicon. The href attribute is used to specify the URL of the linked resource.
A typical link tag example is:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Website</title> <!-- Link to external CSS style sheet --> <link rel="stylesheet" href="styles.css"> <!-- Link to website icon --> <link rel="icon" href="favicon.ico"> </head> <body> <h1>Link!</h1> <p>This is an introduction to the link. </p> </body> </html>
In this example, we use two link tags. The first link tag associates the HTML document with the external CSS style sheet styles.css , which is used to define the style of the page. The second link tag associates the HTML document with the website favicon.ico , which will be displayed when the user opens the website in a browser.
Of course, the link tag has other attributes and uses. Here are some common attributes and use cases:
type : This attribute is used to specify the MIME type of the linked resource. For example, when linking to a CSS stylesheet, you can specify its type as text/css . In most cases, browsers can automatically identify resource types, so the type attribute is not required. Example:
<link rel="stylesheet" href="styles.css" type="text/css">
media : This attribute allows you to specify which media types the style sheet applies to. For example, you can create a printing-specific style sheet that is used when users print a page. Example:
<link rel="stylesheet" href="print.css" media="print">
sizes : When using the link tag to link to icons of multiple sizes, you can use sizes attribute to specify the size of the icon. This is useful for situations where icons are displayed in different sizes depending on the device. Example:
<link rel="icon" href="icon-48x48.png" sizes="48x48"> <link rel="icon" href="icon-96x96.png" sizes="96x96">
crossorigin : When linking to a cross-origin resource, you can use crossorigin attribute to specify the CORS (Cross-Origin Resource Sharing) settings for the resource. Example:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous">
integrity : This attribute is used to ensure the integrity of external resources and can be used together with the crossorigin attribute. By giving the resource a content-based hash (such as SHA-256), you can ensure that the resource has not been tampered with. Example:
<link rel="stylesheet" href="https://link.com/styles.css" crossorigin="anonymous" integrity="sha256-base64-encoded-hash">
preload : rel="preload" can be used to load important resources in advance, such as fonts, images or scripts. This optimizes page loading performance. Example:
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
These are some common attributes and uses of link tag.
In addition to the previously mentioned, rel has more attribute values:
alternate : Use rel="alternate" to provide alternative versions of the document, such as pages in a different language or for different devices. Example:
<link rel="alternate" hreflang="es" href="https://link.com/es/a"> <link rel="alternate" media="only screen and (max-width: 640px)" href="https://link.com/mobile/a">
dns-prefetch : Domain names can be pre-resolved through rel="dns-prefetch" to reduce DNS lookup time and speed up resource loading. Example:
<link rel="dns-prefetch" href="//link.com">
preconnect : Similar to dns-prefetch , rel="preconnect" can pre-establish a TCP connection to a third-party resource, reducing the time required to establish a connection. Example:
<link rel="preconnect" href="https://link.com">
prefetch : Use rel="prefetch" to pre-fetch and cache resources for use in subsequent pages. This is useful for preloading resources that may be used in the page. Example:
<link rel="prefetch" href="pre-page.html">
canonical : Using rel="canonical" can provide search engines with the canonical URL of a page, helping to avoid duplicate content issues. Example:
<link rel="canonical" href="https://link.com/a/post">
license : Use rel="license" to specify the license URL of the document. Example:
<link rel="license" href="https://link.org/licenses/by/4.0/">
manifest : Use rel="manifest" to link a web application's manifest file (usually in JSON format) to an HTML document. The manifest file contains the metadata of the web application, such as name, description, icon, etc. Example:
<link rel="manifest" href="manifest.json">
Please note that different browsers may have varying degrees of support for these properties and functionality. It is recommended to consult the relevant documentation when using new features to ensure compatibility and functionality.
This concludes this article on the specific usage of the link tag attribute in HTML. For more information on the HTML link tag attribute, please search previous articles on downcodes.com or continue to browse the related articles below. I hope you will support me in the future. downcodes.com!