Για ποιο λόγο χρησιμοποιείται η ετικέτα <link>…

Η ετικέτα <link> χρησιμοποιείται για τη δημιουργία συνδέσεων μεταξύ του τρέχοντος εγγράφου και άλλων πόρων.

Κύριες περιπτώσεις χρήσης:

Σύνδεση με φύλλα στυλ CSS: Η πιο συνηθισμένη χρήση. Επιτρέπει τη σύνδεση εξωτερικών αρχείων CSS για το στυλ της σελίδας.
```
<link rel="stylesheet" href="/css/style.css">
```

Σύνδεση με γραμματοσειρές: Για παράδειγμα, 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">

Σύνδεση εικονιδίων (Favicon): Αλλαγή του προεπιλεγμένου εικονιδίου καρτέλας του προγράμματος περιήγησης.
```
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
```
Δείκτης κανόνικου συνδέσμου: Βοηθά τις μηχανές αναζήτησης να καθορίσουν την κύρια έκδοση της σελίδας σε περίπτωση διπλότυπου περιεχομένου.
```
<link rel="canonical" href="https://example.com/page">
```
Δείκτης εναλλακτικών εκδόσεων του εγγράφου: Για παράδειγμα, για διαφορετικές γλώσσες.
```
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
```

Προφόρτωση πόρων (preload, prefetch, preconnect, prerender): Βελτίωση της απόδοσης μέσω προ-φόρτωσης ή δημιουργίας συνδέσεων.

<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">

Τα βασικά χαρακτηριστικά περιλαμβάνουν rel (σχέση με το τρέχον έγγραφο), href (διεύθυνση URL πόρου), type (τύπος MIME) και media (ερώτημα μέσων).

Για ποιο λόγο χρησιμοποιείται η ετικέτα <link>?