En-têteold

<head>

<head> contient les métadonnées de la page : des données sur les données.
Ces métadonnées définissent les informations de la page (langage, description…), son titre, le style css, les scripts javascript…

<head> est placé avant <body>.

Cette balise représente une partie non visible du code à l’affichage dans le navigateur.

<head> est constitué de ces balises :

  • <title> : balise du titre du site (visible comme étant le nom de l’onglet)
  • <link> : import de fichier css ou autre que javascript
  • <style> : écriture de code css
  • <script> : écriture de code javascript ou import de fichier javascript
  • <meta> balises donnant des informations sur la page

<title>

<title> définit
  • le titre de la page, soit le nom de l’onglet
  • le nom donné au favori
  • le titre du résultat d’un moteur de recherche

<link>

<link> importe un fichier externe pour être interprété par le navigateur, le plus souvent une feuille de style CSS ou une icône
<link> est une balise orpheline (qui ne se ferme pas) et vide (elle n’est définit que par ses attributs)

Indique l’url d’une ressource++S’utilise toujours avec l’attribut rel[][][url]|L’url, le lien pointant vers une ressource, un fichier, un document++En valeur absolu vers une ressource externe++Ou en valeur relative pour un élément interne|*++&++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#stylesheet}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet}

Spécifie la nature de la ressource correspondante au lien indiqué dans l’attribut href++S’utilise toujours avec l’attribut href[][]stylesheet|Indique que le lien est une feuille de style++Recommandé|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#stylesheet}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-stylesheet}<>icon|Indique que l’url pointe vers une icône (format .ico) ou une image pour en faire une favicon++Recommandé|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#icon}++whatwg{https://html.spec.whatwg.org/multipage/links.html#rel-icon}++wiki{https://fr.wikipedia.org/wiki/Favicon} <>alternate|Indique que l’url pointe vers une version alternative de la page|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#alternate}++whatwg{https://html.spec.whatwg.org/multipage/links.html#rel-alternate} <>author|Indique que l’url pointe vers le site web de l’auteur du site ou de la page web actuelle|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#author}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-author} <>help|Indique que l’url pointe vers un document d’aide|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#help}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-help} <>license|Indique que l’url pointe vers un document fournissant les termes du copyright|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#license}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-license} <>search|Indique que l’url pointe vers un document utilisé pour rechercher dans le document actuel et ses pages associées.|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#search}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-search} <>canonical|Indique que l’url pointe vers un document canonique|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#canonical}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-canonical} <>prefetch|Optimisation du chargement de la page : Spécifie que le navigateur peut télécharger et mettre en cache de manière préventive le fichier mentionné par l’ url (priorité faible)|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Link_types/prefetch}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-prefetch}++alsa{https://www.alsacreations.com/astuce/lire/1567-prefetch-prerender-dns-prefetch-link.html}++dare{https://blog.dareboost.com/fr/2020/05/preload-prefetch-et-preconnect-resource-hints/} <>dns-prefetch|Optimisation du chargement de la page : Effectue une résolution des noms de domaine pour l’origine de la ressource spécifiée par l’ url de manière préventive|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Link_types/dns-prefetch}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-dns-prefetch}++alsa{https://www.alsacreations.com/astuce/lire/1567-prefetch-prerender-dns-prefetch-link.html}++dare{https://blog.dareboost.com/fr/2020/05/preload-prefetch-et-preconnect-resource-hints/} <>preload|Optimisation du chargement de la page : Indique que le navigateur doit télécharger et mettre en cache le fichier mentionné par l’ url au plus tôt (priorité haute), le type de la ressource est renseigné par l’attribut as|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Link_types/preload}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-preload}++dare{https://blog.dareboost.com/fr/2020/05/preload-prefetch-et-preconnect-resource-hints/} <>next|Indique que la page actuelle fait partie d’une série, et que la page suivante est renseigné par l’ url|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#next}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-next} <>prev|Indique que la page actuelle fait partie d’une série, et que la page précédente est renseigné par l’ url|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/rel#prev}++whatwg{https://html.spec.whatwg.org/multipage/links.html#link-type-prev}

Une demande cross-origin est une requête pour une ressource (feuilles de style, images, polices ou scripts…) située sur un autre serveur, un autre domaine. Cette demande est gérée par CORS (Cross-Origin Resource Sharing) qui détermine si le navigateur est autorisé ou non à charger le contenu externe.
N’utilisez pas cet attribut si tous vos fichiers se situent sur votre serveur, votre domaine. [][]anonymous|La demande cross-origin est envoyée sans identification et effectue une authentification HTTP de base++Valeur par defaut|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/crossorigin}++whatwg{https://html.spec.whatwg.org/multipage/urls-and-fetching.html#attr-crossorigin-anonymous}<>use-credentials|demande d’origine croisée sera envoyée avec les informations d’identification, les cookies et le certificat.|*++&|mozilla{https://developer.mozilla.org/fr/docs/Web/HTML/Attributes/crossorigin}++whatwg{https://html.spec.whatwg.org/multipage/urls-and-fetching.html#attr-crossorigin-anonymous}