Glossary
HTMLCSSJavaScriptPython

HTML

HTML link Tag: The Link Element

In HTML, the <link> tag to defines a relationship between the current document and an external resource. Most commonly, the link element links CSS stylesheets into HTML web pages.

How to Use the HTML link Tag

The <link> tag usually goes inside the head section of the HTML document. It does not display content but connects the HTML with external resources like CSS files. As an empty tag, the <link> tag has an opening tag but no closing tag. 

<head>
    <link rel="stylesheet" href="styles.css">
</head>
  • <link>: The tag to link to external resources.
  • rel="stylesheet": The relationship attribute, indicating that the linked resource is a stylesheet.
  • href="styles.css": The attribute to reference the path to the external CSS file.

When to Use the Link Element in HTML

The <link> tag is important in web development for several reasons:

Linking CSS to HTML Web Pages

The primary use of the <link> tag is to connect external CSS files to HTML. By linking to an external stylesheet, you can separate content and presentation. 

<link rel="stylesheet" href="<https://example.com/css/styles.css>">

Importing Web Fonts

The <link> tag is also useful for importing fonts from external sources, such as Google Fonts, enhancing web typography. 

<link href="<https://fonts.googleapis.com/css?family=Roboto>" rel="stylesheet">

Defining Favicon

You can use the <link> tag to define a favicon for the website, which appears in the browser tabs and bookmarks. 

<link rel="icon" type="image/png" href="favicon.png">

Examples of link in HTML

Any larger web page uses link elements to connect external stylesheets. Here are some simple examples:

Linking Multiple CSS Files

A company website might use separate CSS files for different design aspects like layout, typography, and reset styles. This modular approach simplifies maintenance: 

<head>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="grid.css">
    <link rel="stylesheet" href="theme.css">
</head>

Responsive Design

A travel blog might link different stylesheets to adjust layouts for desktop and mobile devices. This helps improve user experience across various devices: 

<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Preloading Resources

An e-commerce platform might preload important resources like web fonts to ensure faster rendering and improve performance: 

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Learn More About the HTML link Tag

SEO and link in HTML

Proper use of the <link> tag contributes to search engine optimization (SEO). When linking to stylesheets, make sure to optimize them for page speed, which can influence SEO rankings. Furthermore, specifying the correct rel attribute value, like canonical, helps avoid duplicate content issues. 

<!-- Specify a canonical URL to avoid duplicate content issues -->
<link rel="canonical" href="https://example.com/original-page">

Alternatives to the Link Element for CSS

The <link> tag is the gold standard for connecting external CSS. However, inline styles and internal CSS provide alternatives for smaller style adjustments or privacy-focused pages without external resources.

  • Inline Styles: Use the style attribute directly on HTML elements for small style changes. 

    <p style="color: blue; font-size: 16px;">This paragraph is styled using inline CSS.</p>

  • Internal CSS: Write CSS within the <style> tag inside the <head> section for page-specific styles. 

    <head>
  <style>
    body {
      background-color: lightgrey;
    }
    h1 {
      color: navy;
    }
  </style>
</head>

Security Considerations

When linking to external stylesheets, especially from third-party sources, it's important to handle security considerations:

  • Subresource Integrity (SRI): You can verify that an stylesheet is authentic by including a hash in the integrity attribute. 

    <link
  rel="stylesheet"
  href="https://example.com/styles.css"
  integrity="sha384-abc123def456ghi789"
  crossorigin="anonymous">

  • Cross-Origin Resource Sharing (CORS): You can use crossorigin to specify how to handle requests to external resources. 

    <link
  rel="stylesheet"
  href="https://example.com/styles.css"
  crossorigin="anonymous">

Preloading Resources

Preloading resources helps improve page load performance by fetching essential assets early. The <link> tag with rel="preload" allows you to specify the type of resource (as attribute) and prioritize its loading. 

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Best Practices for Using the HTML link Tag

  • Organize <link> Tags Logically: Place related stylesheets together and comment on their purposes for better readability and maintenance. 

    <head>
  <!-- External reset styles -->
  <link rel="stylesheet" href="reset.css">
  <!-- Theme styles -->
  <link rel="stylesheet" href="theme.css">
</head>

  • Use the rel Attribute Correctly: Specify accurate values, such as stylesheet for stylesheets and canonical to avoid duplicate content. 

    <link rel="stylesheet" href="styles.css">

  • Prioritize Critical CSS: Define which stylesheets to load first to ensure that important content loads as soon as possible. 

    <link rel="preload" href="critical.css" as="style">
Learn HTML for Free
Start learning now
button icon
To advance beyond this tutorial and learn HTML by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

Company

Careers

Blog

Jobs

Product

Glossary

Terms of Use

Privacy Policy

Useful

Press Kit

Imprint

Help

Follow us

© 2024 Mimo GmbH