1. html
  2. /tags
  3. /link

<link>

Definition

The HTML <link> element is used to link to external resources such as stylesheets, icons, and other documents. It is a self-closing tag and is placed in the head section of an HTML document.

Examples

Here's an example of how the <link> element can be used to link to an external stylesheet:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <!-- HTML content goes here -->
  </body>
</html>

In this example, the rel attribute specifies the relationship between the current document and the linked document, the type attribute specifies the MIME type of the linked document, and the href attribute specifies the location of the linked document.

Other common uses of the <link> element include linking to icon files, alternate versions of the current document, and resources for web feeds.

Attributes

This element's attributes include the global attributes.

AttributeDescriptionDeprecated?
asSpecifies the type of the linked resource, to help the browser determine the appropriate resource to download. Possible values include "style", "script", "image", "document", "font", and "manifest"No
crossoriginSpecifies whether the resource being linked should be downloaded with CORS (Cross-Origin Resource Sharing) support. Possible values include "anonymous" and "use-credentials"No
disabledSpecifies that the linked resource should not be loaded. This can be useful for disabling stylesheets or scripts in certain situationsNo
hrefSpecifies the URL of the linked resourceNo
hreflangSpecifies the language of the linked resourceNo
integritySpecifies a hash that can be used to ensure that the linked resource has not been tampered with. This can be useful for security purposesNo
mediaSpecifies the media type or query for which the linked resource is intendedNo
referrerpolicySpecifies the referrer policy for the linked resource. Possible values include "no-referrer", "no-referrer-when-downgrade", "origin", "origin-when-cross-origin", "same-origin", "strict-origin", "strict-origin-when-cross-origin", and "unsafe-url"No
relSpecifies the relationship between the current document and the linked resource. Common values include "stylesheet", "icon", "preload", and "prefetch"No
sizesSpecifies the sizes of the icons or other resources being linked, in the format "widthxheight"No
titleSpecifies a title for the linked resource, which can be used as a tooltip or for other purposesNo
typeSpecifies the MIME type of the linked resourceNo

Best Practices

  • Place <link> elements in the head section of your HTML document. This ensures that the browser loads the resources before rendering the page, which can improve page load times and prevent issues with rendering.
  • Use the rel attribute to specify the correct relationship between the current document and the linked resource. This can help search engines and other tools better understand the content and structure of your page.
  • Use the type attribute to specify the correct MIME type of the linked resource. This can help the browser determine how to handle the resource and avoid any issues with compatibility or security.
  • Use the href attribute to specify the correct URL for the linked resource. Make sure that the URL is correct and that the resource is available at that location.
  • Use the as attribute to specify the correct resource type, which can help the browser optimize the loading and rendering of the resource.
  • Use the integrity attribute to ensure that the linked resource has not been tampered with, which can improve security.
  • Use the media attribute to specify the correct media type or query for which the linked resource is intended, which can help the browser optimize the loading and rendering of the resource.
  • Use the referrerpolicy attribute to specify the correct referrer policy for the linked resource, which can help protect user privacy and security.
  • Use the sizes attribute to specify the correct sizes of icons or other resources being linked, which can help the browser optimize the rendering of the resource.
  • Use the title attribute to provide additional information about the linked resource, which can help users better understand the purpose and content of the resource.

Accessibility Considerations

  • Provide alternative text for linked icons or other resources. This helps users who cannot see the icon or image understand the purpose of the linked resource.
  • Use the title attribute to provide additional context or information about the linked resource. This can be helpful for users who use assistive technologies to access the web, such as screen readers.
  • Ensure that the linked resource is accessible to users with disabilities. For example, if you are linking to a PDF document, make sure that the document is properly tagged and structured for accessibility.
  • Use the hreflang attribute to specify the language of the linked resource, which can help users who speak different languages understand the content.
  • Use the rel attribute to specify the correct relationship between the current document and the linked resource. This can help users navigate and understand the content of the page.
  • Use the aria-describedby attribute to provide additional information about the linked resource, which can be helpful for users who use assistive technologies to access the web.
  • Ensure that the linked resource does not trigger unexpected behavior or pop-ups, which can be disorienting or confusing for users with disabilities.
  • Consider using the preload or prefetch values for the rel attribute to improve performance for users with slow internet connections or limited data plans. However, be aware that this can also increase the load on the user's device and may not be appropriate for all situations.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes