La balise `<head>`

La balise <head> contient l’ensemble des informations nécessaires au navigateur pour pouvoir rendre la page de la manière que vous souhaitez. Elle n’est pas en charge du rendu visuel à l’utilisateur, seulement de la mise en place préparatoire des éléments nécessaires au rendu.

Cette balise ne peut contenir que des éléments appartenant à la typologie des “metadata content” ↗.

Les balises obligatoires

source ↗

index.html

<head>
  <!-- Définit l'encodage de caractères utilisé -->
  <meta charset="utf-8" />
  <!-- Définit le texte affiché dans l'onglet du navigateur -->
  <title>Ma page test</title>
</head>

Les balises de gestion du viewport

source ↗

index.html

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Les balises d'import de ressources

source ↗

index.html

<head>
  <!-- Import d'une feuille de style CSS -->
  <link rel="stylesheet" type="text/css" href="/style.css" />
  <script src="/index.js" type="module" defer></script>
</head>

Optimisation tip
Afin de rendre le HTML plus rapidement, il est possible d’ajouter un attribut spécial à la balise <script> :

async pour charger le JS en parallèle et l’exécuter en suivant (utile pour les scripts de tracking par exemple)

defer pour charger le JS en parallèle et l’exécuter une fois que le DOM est intégralement chargé (utile dans tous les autres cas)

Plus d’infos sur cet article ↗

source ↗

index.html

<head>
  <!-- Primary Meta Tags -->
  <title>[[text]]</title>
  <meta name="title" content="[[text]]" />
  <meta name="description" content="[[text]]" />
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="[[url]]" />
  <meta property="og:title" content="[[text]]" />
  <meta property="og:description" content="[[text]]" />
  <meta property="og:image" content="[[url]]" />
  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="[[url]]" />
  <meta property="twitter:title" content="[[text]]" />
  <meta property="twitter:description" content="[[text]]" />
  <meta property="twitter:image" content="[[url]]" />
</head>

Les balises moins connues

index.html

<!-- Spécifie la racine du site. Sera appliqué à l'ensemble des liens contenus dans la page -->
<base href="[[url]]" />
<!-- Spécifie le comportement par défaut de tous les liens de la page -->
<base target="[[text]]" />
<!-- Informe la navigateur de précharger certains contenus -->
<link rel="preload" as="image" href="/logo.svg" />

La balise <head>

Les balises obligatoires

Les balises de gestion du viewport

Les balises d'import de ressources

Les balises de partage social

Les balises moins connues

La balise `<head>`