Balise HTML <head> - Utilisation, attributs, exemples

La balise <head> contient les métadonnées (titre du document, jeu de caractères, styles, liens, scripts), c'est-à-dire des informations spécifiques sur la page web qui ne sont pas affichées à l'utilisateur. Les métadonnées fournissent aux navigateurs et aux moteurs de recherche des informations techniques sur la page web.

Position de la balise `<head>`

La balise <head> est le premier élément à l'intérieur de <html>, placée directement avant le <body>. Tandis que le <body> contient le contenu visible de la page, le <head> contient les informations en coulisses dont le navigateur a besoin pour afficher et identifier la page :

<!DOCTYPE html>
<html>
  <head>
    <!-- metadata goes here -->
  </head>
  <body>
    <!-- visible content goes here -->
  </body>
</html>

La balise <head> est techniquement requise, mais si vous l'omettez, les navigateurs en créeront silencieusement une pour vous et y déplaceront les éléments de niveau head (comme <title> et <meta>). L'écrire explicitement rend votre document prévisible et valide.

Éléments pouvant être placés dans le `<head>`

Le <head> peut contenir les éléments suivants :

La balise <title> définit le titre d'une page web (obligatoire). Elle peut être confondue avec la balise <h1>, mais elles sont différentes. La balise <h1> spécifie le titre du contenu de la page, tandis que la balise <title> est une métadonnée représentant le titre de l'ensemble du contenu HTML et non son contenu.
La balise <style> contient du code CSS qui définit comment les éléments HTML doivent être rendus dans un navigateur.
La balise <base> définit une URL absolue (de base) pour toutes les URL relatives.
La balise <link> définit la relation entre le document HTML actuel et la ressource à laquelle il fait référence, ou contient un lien vers une feuille de style externe. Elle peut avoir deux attributs : rel="stylesheet" et href.
La balise <meta> fournit des informations supplémentaires (métadonnées) sur un document HTML. Le <head> d'une page peut inclure différents types d'éléments <meta> pouvant contenir des attributs name et content.
La balise <script> contient un script (généralement JavaScript), ou une référence à un fichier externe contenant des scripts. Cet élément peut être inclus dans <head>. Parfois, il est préférable de le placer en bas du <body> pour améliorer les performances de chargement de la page. L'élément <script> peut sembler vide, mais ce n'est pas le cas.
La balise <noscript> définit un texte alternatif affiché si le navigateur ne prend pas en charge les scripts ou si les scripts sont désactivés par l'utilisateur.

La balise <head> fonctionne par paire. Le contenu est écrit entre les balises ouvrante (<head>) et fermante (</head>).

Exemples

Exemple de la balise HTML `<head>` utilisée avec les balises `<title>` et `<style>` :

Exemple d'une balise head HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <style>
      body{
        background-color: #d3d3d3;
      }
      p{
        color:  #1c87c9;
      }
      a{
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Paragraph</p>
    <a href="#">Link</a>
  </body>
</html>

Essayez vous-même »

Dans cet exemple, la balise <head> est utilisée avec les balises <title> et <style>. La balise <title> définit le titre du document, qui s'affiche dans la fenêtre du navigateur. Dans la balise <style>, le style du document est défini : l'arrière-plan du document est gris clair, le texte des paragraphes marqués par la balise <p> est bleu, et les liens dans la balise <a> sont rouges.

Exemple de la balise HTML `<head>` utilisée avec la balise `<link>` :

Le contenu de la page

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>

Essayez vous-même »

Ici, la balise <link> relie la page à une feuille de style externe sitée à css/style.css (un fichier dans un dossier css à côté du fichier HTML). Conserver le CSS dans un fichier séparé est l'approche standard pour les vrais projets, car la même feuille de style peut être partagée entre de nombreuses pages et mise en cache par le navigateur. La page ci-dessus n'affichera les styles que si le fichier style.css existe bien au chemin indiqué.

Exemple de la balise HTML `<head>` utilisée avec la balise `<meta>` :

Balise HTML <head>

<!DOCTYPE html>
<html>
  <head>
    <meta name="title" content="HTML and CSS Books" />
    <meta name="description" content="HTML and CSS Basics for Beginners" />
    <meta http-equiv="refresh" content="30" />
  </head>
  <body>
    <p>The content of the page</p>
  </body>
</html>

Essayez vous-même »

La balise <meta> fournit des métadonnées sur la page. Le contenu name="description" est utilisé par les moteurs de recherche comme extrait sous un résultat de recherche. La ligne http-equiv="refresh" recharge la page toutes les 30 secondes — cela est rarement approprié aujourd'hui (cela nuit à l'accessibilité et est généralement remplacé par JavaScript ou des en-têtes HTTP), donc utilisez-la avec parcimonie.

Les balises `<meta>` dont vous avez presque toujours besoin

Quelques balises <meta> sont si courantes que presque toutes les pages modernes les incluent.

Encodage des caractères et viewport

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>My Page</title>
</head>

<meta charset="UTF-8"> déclare l'encodage des caractères afin que les lettres accentuées, les symboles et les emojis s'affichent correctement. Placez-la en premier dans le <head>.
<meta name="viewport" content="width=device-width, initial-scale=1"> indique aux navigateurs mobiles d'adapter la largeur de la mise en page à celle de l'appareil au lieu de dézoomer une page dimensionnée pour un ordinateur de bureau. Omettre ceci est la cause la plus fréquente des pages « minuscules » sur téléphone, donc incluez-la sur chaque page responsive.

Balises Open Graph pour le partage sur les réseaux sociaux

Lorsque quelqu'un partage votre URL sur des plateformes comme Facebook, LinkedIn ou Slack, ces services lisent les balises meta Open Graph (og:) pour construire la carte de prévisualisation — le titre, le résumé et l'image miniature.

<head>
  <meta property="og:title" content="Learn HTML - W3docs" />
  <meta property="og:description" content="A beginner-friendly HTML tutorial." />
  <meta property="og:image" content="https://www.example.com/preview.png" />
  <meta property="og:url" content="https://www.example.com/learn-html" />
</head>

Notez que les balises Open Graph utilisent l'attribut property (et non name). L'URL de og:image doit être absolue (commencer par https://), car la plateforme sociale la récupère depuis ses propres serveurs. Consultez le chapitre <meta> pour la liste complète des balises <meta>.

Attributs

En HTML5, la balise <head> ne possède aucun attribut spécifique. Elle ne prend en charge que les attributs globaux et les attributs d'événement.

Pratique

Quelle balise meta doit figurer dans le head de chaque page responsive ?

meta name='viewport' content='width=device-width, initial-scale=1'meta http-equiv='refresh' content='30'meta name='footer'meta property='og:image'

Position de la balise <head>

Éléments pouvant être placés dans le <head>

Exemples

Exemple de la balise HTML <head> utilisée avec les balises <title> et <style> :

Exemple de la balise HTML <head> utilisée avec la balise <link> :

Exemple de la balise HTML <head> utilisée avec la balise <meta> :

Les balises <meta> dont vous avez presque toujours besoin

Encodage des caractères et viewport

Balises Open Graph pour le partage sur les réseaux sociaux

Attributs

Pratique

Position de la balise `<head>`

Éléments pouvant être placés dans le `<head>`

Exemple de la balise HTML `<head>` utilisée avec les balises `<title>` et `<style>` :

Exemple de la balise HTML `<head>` utilisée avec la balise `<link>` :

Exemple de la balise HTML `<head>` utilisée avec la balise `<meta>` :

Les balises `<meta>` dont vous avez presque toujours besoin