Comprendre la fonctionnalité et l'importance de la balise <head> dans une page HTML
2 min de lecture
Dans l'introduction au HTML, nous avons exploré la structure générale d'une page HTML. Nous avons vu que le contenu visible d'une page est défini dans la balise <body>,
mais savais-tu que ce n'est pas la seule balise qui joue un rôle essentiel dans la création d'une page web ?
Il existe également une balise qui est tout aussi importante, mais qui est souvent négligée : la balise <head>.
🎓 Aperçu de la balise <head>
La balise <head> est située entre les balises <html> et <body>. Elle ne contient pas de contenu directement visible sur la page, mais
elle fournit des métadonnées importantes et inclut des liens vers des ressources externes, comme des fichiers CSS et JavaScript.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon super site</title>
<meta name="description" content="Ceci est un exemple de page HTML.">
</head>
<body></body>
</html>🔎 Les métadonnées
Certaines balises situées dans la balise <head> fournissent des informations essentielles au navigateur, aux moteurs de recherche et à d'autres applications.
Ces informations sont appelées métadonnées.
Voici un aperçu de certains éléments courants que tu peux y trouver :
- Titre
<title>- Définit le titre de la page, affiché dans l'onglet du navigateur.
- Il est important pour le référencement et l'expérience utilisateur.
- Encodage des caractères
<meta charset="UTF-8">- Définit l'encodage de caractères utilisé dans le document.
- UTF-8 est couramment utilisé en raison de sa prise en charge des langues et caractères spéciaux.
- Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">- Configure la vue du navigateur pour les appareils mobiles.
- Permet de garantir que le site web est adapté à un affichage adaptatif (responsive).
- Description
<meta name="description" content="...">- Fournit une brève description de la page.
- Utilisée par les moteurs de recherche pour afficher un extrait dans les résultats de recherche.
- Mots-clés
<meta name="keywords" content="...">- Liste de mots-clés pertinents pour la page.
Balise `<meta name="keywords">`
Cette balise est encore souvent utilisée, mais son importance est que très légère dans le référencement moderne.
À titre d'information : Google ne l'utilise pas.
🎨 Styles et scripts
La balise <head> permet également d'inclure des ressources externes telles que des feuilles de style (CSS) et des scripts (JavaScript).
Ces ressources permettent de styliser la page et d'ajouter des fonctionnalités interactives.
<head>
<!-- Feuille de style CSS -->
<link rel="stylesheet" href="/styles/styles.css">
<!-- Script JavaScript -->
<script src="/scripts/app.js"></script>
</head>Dans cet exemple, une feuille de style externe appelée styles.css est liée au document HTML à l'aide de la balise <link>.
De même, un script JavaScript externe appelé app.js est inclus à l'aide de la balise <script>.
Ces fichiers sont chargés lorsque la page est ouverte, ce qui permet d'appliquer des styles et d'ajouter des fonctionnalités à la page.
Inclusion des fichiers JavaScript dans la balise `<head>`
Il est recommandé d'inclure les fichiers JavaScript à la fin de la balise <body> pour améliorer les performances de chargement de la page.
En effet, cela permet au navigateur de charger le contenu visible avant d'exécuter les scripts, ce qui améliore l'expérience utilisateur.
🌐 Le référencement
Tu l'auras remarqué, j'ai parlé de référencement à plusieurs reprises dans cet article. Mais alors, qu'est-ce que c'est ?
Le référencement (ou SEO pour Search Engine Optimization) est l'ensemble des techniques visant à améliorer la visibilité d'un site web dans les résultats des moteurs de recherche.
Il est essentiel de bien structurer la balise <head> pour optimiser le référencement de ta page.
Les moteurs se basent sur les informations fournies dans cette balise pour indexer et classer les pages web.
Mais bien entendu, le référencement ne se limite pas à la balise <head> ! 😉
📚 Conclusion
La balise <head> est un élément essentiel de toute page HTML. Elle fournit des informations essentielles pour la structure
d'une page HTML, y compris le titre, les métadonnées et les liens vers des ressources externes.