La ce se folosește eticheta <link>?

Eticheta <link> este utilizată pentru a stabili legături între documentul curent și alte resurse.

Cazurile principale de utilizare:

• Conectarea la foile de stil CSS: Cea mai comună utilizare. Permite conectarea fișierelor CSS externe pentru stilizarea paginii.

  <link rel="stylesheet" href="/css/style.css">
  

• Conectarea la fonturi: De exemplu, Google Fonts.

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

• Conectarea la pictograme (Favicon): Schimbarea pictogramei standard a filei browserului.

  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
  

• Indicare link canonic: Ajută motoarele de căutare să determine versiunea principală a paginii în cazul conținutului duplicat.

  <link rel="canonical" href="https://example.com/page">
  

• Indicare versiuni alternative ale documentului: De exemplu, pentru diferite limbi.

  <link rel="alternate" hreflang="en" href="https://example.com/en/page">
  

• Preîncărcarea resurselor (preload, prefetch, preconnect, prerender): Îmbunătățirea performanței prin încărcare anticipată sau stabilirea conexiunilor.

  <link rel="preload" href="/fonts/roboto.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preconnect" href="https://api.example.com">
  <link rel="prefetch" href="/data/next-page.json">
  <link rel="prerender" href="https://example.com/next-page">
  

Atributele cheie includ rel (relația cu documentul curent), href (URL-ul resursei), type (tipul MIME) și media (interogarea media).