Logo - laConsole

Apprendre HTML : Balises de Métadonnées

La balise head contient les métadonnées (informations d'en-tête) d'une page web. Bien qu'invisibles, les balises d'en-tête ont un rôle essentiel.

Icône de calendrier
Débutant
8 chapitres

Balises d’en-tête principales

Balise <title>

La balise <title> permet de définir le titre d’une page web.

copié ! 
<!DOCTYPE html>
<html>
	<head>
		<title>laConsole - Formations en développement web</title>
	</head>
</html>

Ce titre s’affichera :

  • Dans les résultats des moteurs de recherche (SERP)
  • Dans l’onglet du navigateur

Balise <meta>

La balise orpheline <meta> définit de nombreuses métadonnées d’une page web. Son comportement varie en fonction des attributs qui lui sont greffés. #couteausuisse

Encodage des caractères

Pour préciser l’encodage de la page on utilisera la balise <meta> avec l’attribut charset.

copié ! 
<!DOCTYPE html>
<html>
	<head>
		<!-- Autres balises ... -->
		<meta charset="UTF-8">
	</head>
</html>

L’encodage des caractères sur une page web consiste à spécifier un jeu de caractères utilisés par une page web. Il prendra quasi systématiquement la valeur UTF-8 sur la plupart de vos pages web car il s’agit de l’encodage le plus utilisé dans les systèmes GNU et Linux.

Méta description

Pour renseigner une méta description à notre page, on utilisera la balise <meta> avec les attributs :

  • name prenant la valeur « description ».
  • content ayant pour valeur la méta description en question.
copié ! 
<!DOCTYPE html>
<html>
	<head>
		<meta name="description" content="Blablabla...">
	</head>
</html>

Ce titre s’affichera dans les résultats des moteurs de recherche (SERP).

Responsive (mobile)

Pour optimiser l’affichage d’un site sur mobile on utilisera systématiquement la balise <meta> avec les attributs :

  • name prenant la valeur viewport.
  • content ayant pour valeur width=device-width, initial-scale=1.0.
copié ! 
<!DOCTYPE html>
<html>
	<head>
		<!-- Autres balises ... -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
</html>

La balise orpheline <link> permet de lier une ressource à la page web. Cette ressource peut être locale (sur le même serveur) ou distante (sur un serveur distant).

Cette balise possède 2 attributs :

  • href : il s’agit du chemin vers la ressource à lier à la page.

  • rel : indique le type de ressource à mettre en relation.

  • Une feuille de style La plupart du temps, cette ressource est une feuille de style CSS dont le rôle est de mettre en forme les balises HTML de la page. C’est rel="stylesheet" qui indique que la ressource est une feuille CSS.

copié ! 
<!DOCTYPE html>
<html>
	<head>
		<link href="dossier/fichier.css" rel="stylesheet">
	</head>
</html>
  • Un favicon Cette ressource externe peut également être un favicon. Le favicon est la petite icône qui apparait tout à gauche de l’onglet d’une page web. Il s’agit la plupart du temps d’une version originale ou allégée du logo d’un site. C’est rel="stylesheet" qui indique que la ressource est une feuille CSS.
copié ! 
<!DOCTYPE html>
<html>
	<head>
		<link href="favicon.ico" rel="icon">
	</head>
</html>

Un favicon porte généralement l’extension .ico, mais il peut également s’agir d’un PNG ou d’un SVG.

Balise <script>

La balise <script> permet de lier un document JavaScript à la page web. Ce document JavaScript peut être local (sur le même serveur) ou distant (sur un serveur distant).

Le chemin vers le document JS est spécifié par l’attribut src.

Pour des raisons détaillées dans la formation dédiée à JavaScript, notez qu’il sera aussi possible d’ajouter notre balise <script> juste avant la fermeture du body avec </body>.

copié ! 
<!DOCTYPE html>
<html>
	<head>
		<script src="dossier/fichier.js"></script>
	</head>
	<body>
		<script src="dossier/fichier.js"></script>
	</body>
</html>

Squelette minimal d’une page web

En reprenant l’ensemble des balises vues précédemment, on obtient le squelette minimal d’une page web.

ma-page.html
copié ! 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>laConsole- Formations en développement web</title>
		<meta name="description" content="Blablabla...">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="icon" href="favicon.ico">
		<link href="dossier/fichier.css" rel="stylesheet">
		<script src="dossier/fichier.js"></script>
	</head>
	<body></body>
</html>

Nous allons maintenant commencer à réellement construire notre page web en ajoutant des balises HTML à l’intérieur de la balise <body>.