HTML <link> Element

Publish in HTML Tutorial el 24/05/2025 16:36

The <link> HTML element specifies relationships between the current document and external resources. This element is most commonly used to link to stylesheets, but is also used to establish site icons (favicons) and other relationships between documents.

Key attributes of <link>:

href: Specifies the location of the linked resource
rel: Defines the relationship between documents
type: Indicates the MIME type of the linked resource
media: Specifies which media/device the resource is optimized for

Basic Syntax

Here's how a basic <link> element looks in HTML:

Examples of <link> Usage

1. Linking a CSS Stylesheet

The most common use of <link> is to connect an external CSS file to your HTML document.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-primary">Styled Button</button>
</body>
</html>

2. Adding a Favicon

The <link> element is used to specify favicons for your website.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Favicon Example</title>
  <link rel="icon" type="image/x-icon" href="https://www.google.com/favicon.ico">
</head>
<body>
  <p>This page has a favicon loaded from Google</p>
</body>
</html>

3. Preloading Resources

You can use <link> with rel="preload" to tell the browser to start loading critical resources early.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Preload Example</title>
  <link rel="preload" href="important-image.jpg" as="image">
  <link rel="preload" href="critical.css" as="style">
  <link rel="stylesheet" href="critical.css">
</head>
<body>
  <p>This page preloads critical resources</p>
</body>
</html>

4. JavaScript-Enabled Stylesheet Switching

This example shows how to use JavaScript with <link> to switch between stylesheets.

Play Code

<!DOCTYPE html>
<html lang="es" data-bs-theme="light">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Theme Switcher</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      padding: 2rem;
    }
  </style>
</head>
<body>

  <div class="container text-center">
    <h1 class="mb-4">Modo Claro / Oscuro con Bootstrap 5</h1>
    <button class="btn btn-primary mb-4" onclick="switchTheme()">Cambiar Modo</button>
    
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Ejemplo de tarjeta</h5>
        <p class="card-text">Este es un texto dentro de una tarjeta. El tema actual se adapta automáticamente.</p>
      </div>
    </div>
  </div>

  <script>
    function switchTheme() {
      const html = document.documentElement;
      const currentTheme = html.getAttribute('data-bs-theme');
      html.setAttribute('data-bs-theme', currentTheme === 'light' ? 'dark' : 'light');
    }
  </script>

</body>
</html>

How does it work?

Bootstrap 5.3+ includes support for dark mode using data-bs-theme="dark" or "light" in the <html>
The button calls switchTheme(), which simply toggles that attribute.
All components (buttons, cards, etc.) automatically change their appearance without reloading CSS.

5. Dynamic Resource Loading with JavaScript

This example demonstrates how to dynamically load a CSS file using JavaScript.

Play Code

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Loading</title>
</head>
<body>
  <button onclick="loadCSS()">Load Special Styles</button>
  <script>
    function loadCSS() {
      const link = document.createElement('link');
      link.rel = 'stylesheet';
      link.href = 'special-styles.css';
      document.head.appendChild(link);
    }
  </script>
</body>
</html>

Tips and Tricks

Performance Tip: Place <link> elements in the <head> to allow browsers to discover and load resources early.
Multiple Icons: You can provide multiple favicon sizes for different devices by using multiple <link> elements with different sizes.
DNS Prefetch: Use <link rel="dns-prefetch" href="//domain.com"> to perform DNS lookups for external domains in advance.
Media Queries: The media attribute allows you to load different stylesheets for different devices or screen sizes.
Crossorigin: When loading fonts from CDNs, use crossorigin="anonymous" to ensure proper CORS handling.