Για ποιο λόγο είναι απαραίτητο το χαρακτηριστικό rel στη ετικέτα link;

Το χαρακτηριστικό rel στην ετικέτα <link> ορίζει τη σχέση (relationship) μεταξύ του τρέχοντος εγγράφου και του εγγράφου στο οποίο αναφέρεται η ετικέτα. Ενημερώνει το πρόγραμμα περιήγησης πώς να χρησιμοποιήσει τον συνδεδεμένο πόρο.

Οι πιο συνηθισμένες τιμές του rel είναι:

• stylesheet: Υποδεικνύει ένα εξωτερικό αρχείο CSS που πρέπει να εφαρμοστεί στο έγγραφο.
• icon/shortcut icon: Υποδεικνύει ένα εικονίδιο (favicon) για τον ιστότοπο, που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης.
• preload: Φορτώνει εκ των προτέρων τον πόρο που θα χρειαστεί αργότερα, χωρίς να μπλοκάρει την απόδοση.
• preconnect: Δημιουργεί μια σύνδεση με την καθορισμένη πηγή εκ των προτέρων, επιταχύνοντας τα επόμενα αιτήματα.
• prefetch: Φορτώνει εκ των προτέρων τον πόρο που ενδέχεται να χρειαστεί σε μελλοντική πλοήγηση του χρήστη.
• canonical: Υποδεικνύει το κανoνικό URL της σελίδας, βοηθώντας τις μηχανές αναζήτησης να καθορίσουν την κύρια έκδοση του περιεχομένου.
• alternate: Υποδεικνύει μια εναλλακτική έκδοση του τρέχοντος εγγράφου (π.χ. σε άλλη γλώσσα ή σε διαφορετική μορφή).
• author: Υποδεικνύει τον δημιουργό του εγγράφου.
• help: Υποδεικνύει ένα βοήθημα έγγραφο.

Παράδειγμα χρήσης του rel="stylesheet":

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

Παράδειγμα χρήσης του rel="icon":

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Παράδειγμα χρήσης του rel="preload":

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