Chargement...

L’élément head HTML

La session précédente s’est concentrée sur un enfant du head du document : title. Zoomez maintenant sur l’élément head lui-même — la boîte qui contient les métadonnées de la page pour les navigateurs, les outils de recherche et les ressources liées. Les visiteurs ne lisent pas head comme ils lisent une histoire dans la vue principale. Ils en ressentent les effets via le libellé de l’onglet, les caractères corrects, la mise à l’échelle mobile et les feuilles de style qui se chargent avant que le contenu du body ne soit peint.

À quoi sert head

<head>...</head> se trouve à l’intérieur de <html>, en général juste après la balise ouvrante html et avant <body>. C’est la salle de contrôle du document pour les métadonnées et les liens de ressources. Ce n’est pas une bannière visible. La bannière visible de page que vous construirez plus tard avec un élément <header> est une balise différente avec un rôle différent.

Réponse directe

Placez les métadonnées dans <head>...</head> : un title, en général <meta charset="UTF-8">, souvent une meta viewport pour la mise en page mobile, et <link rel="stylesheet" href="..."> quand vous utilisez du CSS externe. Placez titres visibles, paragraphes, images et interface interactive dans <body>. title est un enfant important de head — il ne remplace pas head.

Enfants courants en un coup d’œil

📊 Enfants courants de head

Élément Rôle
title Libellé de l’onglet / du document
meta charset Encodage des caractères (UTF-8)
meta viewport Indication de largeur et d’échelle mobile
link stylesheet Fichier CSS externe
style CSS interne optionnel
script Scripts optionnels (les habitudes de placement varient ; beaucoup de débutants chargent en fin de body)

Un head de départ pratique

Vous n’avez pas besoin de toutes les balises meta possibles dès le premier jour. Un head débutant fiable couvre l’encodage, le viewport mobile, le titre du document et un lien de feuille de style quand le CSS vit dans un fichier séparé.

Un head de départ pratique

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

Lecture de l’exemple

  • meta charset="UTF-8" indique au navigateur comment décoder les caractères — y compris emoji et texte non latin des sessions précédentes
  • viewport aide les navigateurs mobiles à utiliser la largeur de l’appareil au lieu d’une minuscule mise en page bureau réduite
  • title libelle l’onglet, comme vous l’avez pratiqué dans la session sur le titre de page
  • link rel="stylesheet" attache styles.css sans mettre les règles CSS dans chaque fichier HTML
  • Tout ce que le visiteur lit sur la page se trouve sous body

Charset d’abord, tôt dans head

Placez la meta charset près du haut de head pour que le navigateur connaisse l’encodage avant d’interpréter le reste du texte du document. UTF-8 est le défaut moderne à utiliser sauf contrainte héritée rare. Un charset manquant ou tardif est une cause classique de caractères cassés qui ressemblent à une corruption « aléatoire ».

Viewport et navigateurs mobiles

Sans meta viewport, beaucoup de téléphones supposent une toile bureau large et réduisent la page. Le départ courant width=device-width, initial-scale=1.0 dit au navigateur de correspondre à la largeur de l’appareil et de commencer à un zoom normal. Vous affinerez le design responsive avec CSS plus tard ; le viewport est la poignée de main côté HTML qui rend ces mises en page utilisables sur téléphone.

Lier le CSS depuis head

Les feuilles de style externes séparent la présentation de la structure. L’élément link dans head avec rel="stylesheet" et un chemin href est la façon conviviale pour débutants d’attacher le CSS. Les chemins suivent les mêmes idées de chemins de fichiers apprises plus tôt. Si le fichier CSS manque, le HTML fonctionne toujours — il a juste l’air sans style.

head vs body vs header

  • head — métadonnées et liens de ressources ; pas l’article principal lisible
  • body — contenu visible que les visiteurs lisent et avec lequel ils interagissent
  • header — élément de sectionnement visible pour bannières ou blocs d’introduction à l’intérieur de body (vous l’utiliserez dans des sessions de mise en page ultérieures)
    Ne renommez pas head en header en espérant que ce sont des alias. Ce sont des éléments différents. Les confondre mène à un balisage invalide ou inefficace.

Scripts et head (note débutant)

Les scripts peuvent apparaître dans head ou body. Beaucoup de pages d’enseignement chargent des scripts simples en fin de body pour que la structure HTML existe d’abord. Les stratégies de chargement avancées viennent plus tard. Pour cette session, sachez que script est autorisé comme enfant de head, mais le contenu visible n’appartient toujours pas à head.

Pratiquez dans votre éditeur

  1. Partez d’un squelette HTML de base avec html, head et body.
  2. Dans head, ajoutez charset UTF-8, une meta viewport et un title clair.
  3. Ajoutez un link vers un styles.css simple si vous en avez un (ou créez un fichier vide pour que le chemin soit réel).
  4. Gardez tout le texte visible et les titres dans body uniquement.
  5. Utilisez Afficher le code source ou l’onglet Elements des outils de développement pour confirmer que la section head correspond à votre intention.
  6. Retirez temporairement le viewport, rechargez dans une fenêtre étroite ou un émulateur téléphone si possible, et remarquez à quel point l’échelle peut sembler différente — puis restaurez-le.

Erreurs faciles

  • Mettre paragraphes, images ou titres principaux seulement dans head comme s’il était la toile de la page
  • Oublier le charset pour que caractères spéciaux et emoji cassent
  • Sauter le viewport et se demander pourquoi la mise en page mobile semble bizarrement zoomée
  • Confondre head (métadonnées) avec header (section visible plus tard dans le cours)
  • Supposer que title seul suffit et omettre le charset sur des pages multilingues
  • Lier une feuille de style avec le mauvais chemin et blâmer le HTML quand le CSS ne se charge jamais

Résumé

  • head contient métadonnées et liens de ressources ; body contient le contenu visible
  • Pièces de départ : charset, viewport, title, et souvent un link CSS
  • title est un enfant de head, pas un remplacement de head
  • head n’est pas le même élément que le header visible
  • Placez le charset tôt pour que le navigateur décode correctement le document

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
6
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 1 de 1
Html Tutoriel