Logo

La Balise HEAD en HTML : Comment ça marche

La Balise HEAD

La balise `<head>` contient des informations qui ne sont pas directement visibles sur la page mais qui configurent le document HTML. Ces informations sont utilisées par les navigateurs et les moteurs de recherche.

Voici ce que vous pouvez y mettre et pourquoi c'est utile.

1. Structure de Base

Voici à quoi ressemble généralement une balise `<head>` :

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titre de votre page</title>
  <meta name="description" content="Description de votre page">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="favicon.ico">
</head>

2. Les Principaux Éléments

  • La balise `<title>` : Nom de votre page dans l'onglet du navigateur et dans les résultats de recherche.
  • La balise `<meta charset>` : Définit l'encodage des caractères, généralement UTF-8.
  • La balise `<meta name="viewport">` : Ajuste l'affichage sur les mobiles.
  • La balise `<meta name="description">` : Décrit votre page pour les moteurs de recherche.
  • La balise `<link rel="stylesheet">` : Connecte votre HTML à votre CSS.

3. Métadonnées pour le Référencement

Ces balises aident les moteurs de recherche à comprendre votre contenu.

<head>
  <!-- Données de base -->
  <title>Jardinage urbain | MonSite</title>
  <meta name="description" content="Techniques pour créer un jardin en ville, même dans un petit espace.">
  
  <!-- Open Graph pour les réseaux sociaux -->
  <meta property="og:title" content="Jardinage urbain">
  <meta property="og:description" content="Créez un jardin, même en ville.">
  <meta property="og:image" content="https://monsite.com/images/jardinage.jpg">
  <meta property="og:url" content="https://monsite.com/jardinage">
  
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Jardinage urbain">
</head>

Une bonne description fait environ 150-160 caractères et contient des mots-clés pertinents.

4. Liaison avec le CSS

Il existe plusieurs façons de lier votre HTML à du CSS.

<head>
  <!-- CSS externe -->
  <link rel="stylesheet" href="styles/main.css">
  
  <!-- CSS pour navigateurs spécifiques -->
  <link rel="stylesheet" href="styles/ie.css" media="all and (-ms-high-contrast: none)">
  
  <!-- CSS pour l'impression -->
  <link rel="stylesheet" href="styles/print.css" media="print">
  
  <!-- CSS intégré -->
  <style>
    body {
      margin: 0;
      padding: 20px;
    }
  </style>
</head>

L'attribut `media` permet de charger des styles différents selon le contexte.

5. JavaScript dans la HEAD

Vous pouvez ajouter du JavaScript dans la head, mais cela peut ralentir le chargement. Pour les scripts non urgents, placez-les avant la fermeture de `</body>`.

<head>
  <!-- Script à charger tout de suite -->
  <script src="js/important.js"></script>
  
  <!-- Script avec chargement asynchrone -->
  <script src="js/analytics.js" async></script>
  
  <!-- Script avec chargement différé -->
  <script src="js/fonctions.js" defer></script>
</head>
  • L'attribut `async` : Le script est téléchargé sans bloquer et exécuté dès qu'il est prêt.
  • L'attribut `defer` : Le script est téléchargé sans bloquer mais exécuté après l'analyse du HTML.

6. Favicon et Icônes

Les favicons sont les petites icônes qui apparaissent dans les onglets du navigateur.

<head>
  <!-- Favicon standard -->
  <link rel="icon" href="favicon.ico">
  
  <!-- Favicons pour différentes tailles -->
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  
  <!-- Icônes pour appareils Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  
  <!-- Manifeste pour les PWA -->
  <link rel="manifest" href="site.webmanifest">
</head>

7. Préchargement pour la Performance

Vous pouvez précharger certaines ressources pour accélérer votre site.

<head>
  <!-- Préchargement d'une police -->
  <link rel="preload" href="fonts/ma-police.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- Préchargement d'une image -->
  <link rel="preload" href="images/image-principale.jpg" as="image">
  
  <!-- Préconnexion à un autre site -->
  <link rel="preconnect" href="https://api.exemple.com">
  <link rel="dns-prefetch" href="https://api.exemple.com">
</head>
  • La balise `preload` : Force le navigateur à charger une ressource rapidement.
  • La balise `preconnect` : Établit une connexion anticipée.
  • La balise `dns-prefetch` : Résout l'adresse DNS à l'avance.

8. Compatibilité et Accessibilité

<head>
  <!-- Langue du document -->
  <meta http-equiv="Content-Language" content="fr">
  
  <!-- Compatibilité avec IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- Désactive le format automatique des numéros sur iOS -->
  <meta name="format-detection" content="telephone=no">
  
  <!-- Couleur de thème pour mobiles -->
  <meta name="theme-color" content="#4285f4">
</head>

9. Exemple Complet

<!DOCTYPE html>
<html lang="fr">
<head>
  <!-- Base -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- Infos de la page -->
  <title>Jardinage Urbain | MonSite</title>
  <meta name="description" content="Comment créer un jardin en ville, même sans beaucoup d'espace.">
  <meta name="author" content="Nom de l'auteur">
  
  <!-- Open Graph -->
  <meta property="og:title" content="Jardinage Urbain">
  <meta property="og:description" content="Créez un jardin en ville.">
  <meta property="og:image" content="https://monsite.com/images/jardinage.jpg">
  <meta property="og:url" content="https://monsite.com/jardinage">
  <meta property="og:type" content="article">
  
  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  
  <!-- CSS -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/print.css" media="print">
  
  <!-- Polices -->
  <link rel="preload" href="fonts/opensans.woff2" as="font" type="font/woff2" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  
  <!-- Favicons -->
  <link rel="icon" href="favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#4CAF50">
  
  <!-- Scripts -->
  <script src="js/modernizr.js"></script>
  <script src="js/analytics.js" async></script>
</head>
<body>
  <!-- Contenu de la page -->
</body>
</html>

10. Conseils Pratiques

  • Commencez simple : Utilisez d'abord les éléments de base (charset, viewport, title, description, CSS).
  • Vérifiez votre code : Le validateur W3C peut vous aider à trouver des erreurs.
  • Testez sur mobile : Assurez-vous que tout s'affiche correctement sur différents appareils.
  • Descriptions courtes : Visez environ 150 caractères pour vos descriptions.
  • Utilisez Lighthouse : Cet outil dans Chrome peut vous aider à améliorer votre code.

Conclusion

La balise `<head>` est invisible pour vos visiteurs, mais elle joue un rôle clé dans le fonctionnement de votre site. En comprenant bien son contenu, vous pouvez améliorer la vitesse, l'affichage et le référencement de vos pages.

Commencez par les éléments de base, puis ajoutez progressivement d'autres éléments selon vos besoins.

Logo