Balise HTML <head>
La balise <head> contient des métadonnées (titre du document, jeu de caractères, styles, liens, scripts), des informations spécifiques à la page web qui ne sont pas affichées à l'utilisateur. Les métadonnées fournissent aux navigateurs et aux moteurs de recherche des informations techniques sur la page web.
La balise <head> comprend les éléments suivants :
- La
<title>balise définit le titre d'une page web (obligatoire). Elle peut être confondue avec la balise<h1>, mais elles sont différentes. La balise<h1>spécifie le titre du contenu de la page, tandis que la balise<title>est une métadonnée représentant le titre de l'ensemble du contenu HTML et non son contenu. - La
<style>balise contient du code CSS qui définit comment les éléments HTML doivent être rendus dans un navigateur. - La
<base>balise définit une URL absolue (de base) pour toutes les URL relatives. - La
<link>balise définit la relation entre le document HTML actuel et la ressource à laquelle il fait référence, ou contient un lien vers une feuille de style externe. Elle peut avoir deux attributs : rel="stylesheet" et href. - La
<meta>balise fournit des informations supplémentaires (métadonnées) sur un document HTML. L'en-tête<head>d'une page peut inclure différents types d'éléments<meta>qui peuvent contenir les attributs name et content. - La
<script>balise contient un script (généralement JavaScript) ou une référence à un fichier externe contenant des scripts. Cet élément peut être inclus dans<head>. Parfois, il est préférable de le placer en bas de<body>pour améliorer les performances de chargement de la page. L'élément<script>peut sembler vide, mais ce n'est pas le cas. - La
<noscript>balise définit un texte alternatif, qui est affiché si le navigateur ne prend pas en charge les scripts ou si les scripts sont désactivés par l'utilisateur.
Syntaxe
La balise <head> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<head>) et de fermeture (</head>).
Exemple de la balise HTML <head> utilisée avec les balises <title> et <style> :
Exemple d'une balise HTML head
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-color: #d3d3d3;
}
p{
color: #1c87c9;
}
a{
color: red;
}
</style>
</head>
<body>
<p>Paragraph</p>
<a href="#">Link</a>
</body>
</html>Dans l'exemple ci-dessus, la balise <head> est utilisée avec les balises <title> et <style>. La balise <title> définit le titre du document, qui s'affiche dans la fenêtre du navigateur. Dans la balise <style>, le style du document est défini : l'arrière-plan du document est gris clair, le texte des paragraphes marqués par la balise <p> est bleu, et les liens contenus dans la balise <a> sont rouges.
Exemple de la balise HTML <head> utilisée avec la balise <link> :
Le contenu de la page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>Résultat
Dans cet exemple, nous avons fourni un lien vers le fichier style.css dans le dossier CSS.
Exemple de la balise HTML <head> utilisée avec la balise <meta> :
Balise HTML <head>
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="HTML and CSS Books" />
<meta name="description" content="HTML and CSS Basics for Beginners" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>La <meta> balise contient des métadonnées pour les moteurs de recherche : titre meta, description meta.
Attributs
En HTML5, la balise <head> ne possède aucun attribut spécifique. Elle ne prend en charge que les Attributs globaux et les Attributs d'événement.
Pratique
Lequel des éléments suivants peut être utilisé dans la balise HTML <head> ?