La balise <head> est un élément essentiel de tout document HTML. Elle contient des métadonnées et des instructions importantes qui ne s'affichent pas directement dans la page visible par l'utilisateur.
Ces métadonnées incluent :
- des titres ;
- des liens vers des feuilles de style ;
- des scripts ;
- etc.
La balise <head> se situe juste après la déclaration <!DOCTYPE> et la balise <html>, et avant la balise <body>.
Structure et syntaxe de la balise <head>
Structure et syntaxe de base
La balise <head> est une balise qui fonctionne par paire avec une balise d'ouverture et de fermeture.
Voici à quoi elle ressemble au niveau de sa structure :
<head>
...
</head>C'est à l'intérieur des balises qu'on va renseigner les métadonnées de notre page.
Exemple d'utilisation
Pour que ce soit plus parlant prenons un petit exemple.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bienvenue sur mon site</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script src="scripts/main.js" defer></script>
</head>
<body>
<h1>Bienvenue sur Believemy</h1>
</body>
</html>Dans cet exemple :
- Les balises
<meta>définissent l'encodage de la page ainsi que les règles à respecter pour le responsive design. - La balise
<title>fournit un titre à afficher dans l'onglet du navigateur. - La balise
<link>connecte deux ressources externes : une feuilles de style ainsi qu'un favicon. - La balise
<script>ajoute un fichier JavaScript.
Ces informations sont invisibles pour l'utilisateur mais existent bien pour le navigateur qui les voit.
Quelles sont les balises autorisées dans <head> ?
La balise <head> peut contenir les éléments suivants :
| Élément | Description |
|---|---|
<title> | Pour définir le titre de la page. |
<meta> | Pour fournir des métadonnées comme l'encodage de la page ou des informations comme la description à afficher sur les moteurs de recherche. |
<link> | Lien vers des ressources externes comme des styles CSS ou des favicons. |
<style> | Pour ajouter des éléments CSS directement sur la page. |
<script> | Pour inclure des scripts JavaScript. |
<base> | Pour définir une URL de base pour les liens relatifs sur la page HTML. |
<noscript> | Pour définir quelque chose qu'il faut afficher si le JavaScript ne peut pas être utilisé. |
Compatibilité des navigateurs
L'instruction <head> est compatible avec tous les navigateurs.
| Elément | Google Chrome | Safari | Mozilla Firefox | Edge |
| <head> | Oui | Oui | Oui | Oui |