La balise <head> est la première section majeure d’un document HTML, juste après la déclaration <html>. Contrairement à <body>, son contenu n’est pas affiché directement sur la page. Son rôle est de fournir des méta-données essentielles au navigateur, aux moteurs de recherche et à d’autres services web. Si le contenu de <body> représente l’intérieur d’un livre, la balise <head> représente la couverture de ce livre.
Un <head> bien structuré est crucial pour le référencement (SEO), l’accessibilité, et le bon affichage de votre site sur tous les appareils.
La balise <title> : le titre de l’onglet
C’est la seule balise du <head> dont le contenu est directement visible par l’utilisateur, mais dans l’onglet du navigateur, les favoris ou les résultats de recherche.
- Chaque page doit avoir un titre unique et descriptif.
- C’est un facteur très important pour le référencement.
<head>
<title>Contactez-nous - Mon Entreprise Inc.</title>
</head>
La balise <meta> : l’identité de la page
La balise <meta> est un véritable couteau suisse. Elle permet de fournir une multitude d’informations sur la page. C’est une balise orpheline (elle n’a pas de balise de fermeture).
L’encodage des caractères
C’est sans doute la balise la plus importante. Elle doit être déclarée le plus tôt possible dans le <head>. UTF-8 est l’encodage universel qui garantit que les caractères spéciaux (accents, symboles, etc.) s’affichent correctement.
<meta charset="UTF-8">
Le viewport pour le design responsive
Cette balise est indispensable pour que votre site s’adapte correctement aux différentes tailles d’écran (mobiles, tablettes).
width=device-width: Indique que la largeur de la page doit correspondre à celle de l’écran de l’appareil.initial-scale=1.0: Définit le niveau de zoom initial lorsque la page est chargée.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Les méta-données pour le SEO
Ces balises aident les moteurs de recherche comme Google à comprendre le contenu de votre page et à mieux la présenter dans les résultats.
description: Fournit un résumé concis de la page (environ 155-160 caractères). Ce texte est souvent utilisé comme « snippet » sous le titre dans les résultats de recherche.author: Indique l’auteur du contenu.
<meta name="description" content="Découvrez nos services de création de sites web sur mesure. Contactez-nous pour un devis gratuit.">
<meta name="author" content="Julien M">
Note : La balise <meta name="keywords" ...> était autrefois utilisée pour lister des mots-clés, mais elle est aujourd’hui largement ignorée par les moteurs de recherche.
La balise <link> : connecter des ressources externes
La balise <link> est utilisée pour lier votre document HTML à des ressources externes. Son utilisation la plus courante est de lier une feuille de style CSS.
rel: Spécifie la relation entre le document HTML et la ressource liée.stylesheetindique qu’il s’agit d’une feuille de style.href: Contient l’URL de la ressource à charger.
Lier une feuille de style CSS
<link rel="stylesheet" href="/css/style.css">
Lier une icône de site (Favicon)
C’est la petite icône qui apparaît dans l’onglet du navigateur, à côté du titre.
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Exemple d’un <head> complet
Voici à quoi pourrait ressembler une section <head> bien remplie pour une page web moderne.
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Encodage et viewport (essentiels) -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titre de la page -->
<title>Ma Page Web Incroyable</title>
<!-- Méta-données pour le SEO -->
<meta name="description" content="Ceci est une description de ma page, optimisée pour les moteurs de recherche.">
<meta name="author" content="Mon Nom">
<!-- Lien vers la feuille de style CSS -->
<link rel="stylesheet" href="styles/main.css">
<!-- Lien vers le favicon -->
<link rel="icon" href="images/favicon.png" type="image/png">
</head>
<body>
<!-- ... contenu de la page ... -->
</body>
</html>