HTML - L'élément Head
L'élément HTML <head> est un conteneur pour les éléments suivants : <title> , <style> , <meta> , <link> , <script> et <base> .
L'élément HTML <head>
L'élément <head> est un conteneur pour les métadonnées (données sur les données) et se situe entre la balise <html> et la balise <body> .
Les métadonnées HTML sont des données concernant le document HTML. Elles ne sont pas affichées sur la page.
Les métadonnées définissent généralement le titre du document, l'ensemble de caractères, les styles, les scripts et d'autres informations méta.
L'élément HTML <title>
L'élément <title> définit le titre du document. Ce titre doit être uniquement textuel et s'affiche dans la barre de titre du navigateur ou dans l'onglet de la page.
L'élément <title> est obligatoire dans les documents HTML !
Le contenu d'un titre de page est très important pour l'optimisation des moteurs de recherche (SEO) ! Le titre de la page est utilisé par les algorithmes des moteurs de recherche pour déterminer l'ordre d'affichage des pages dans les résultats de recherche.
L'élément <title> :
- définit un titre dans la barre d'outils du navigateur
- fournit un titre pour la page lorsqu'elle est ajoutée aux favoris
- affiche un titre pour la page dans les résultats des moteurs de recherche
Essayez donc de rendre le titre aussi précis et significatif que possible !
Un document HTML simple :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Un titre de page significatif</title>
</head>
<body>
Le contenu du document......
</body>
</html> L'élément HTML <style>
L'élément <style> est utilisé pour définir des informations de style pour une seule page HTML :
Exemple
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style> L'élément HTML <link>
L'élément <link> définit la relation entre le document actuel et une ressource externe.
La balise <link> est le plus souvent utilisée pour lier des feuilles de style externes :
Exemple
<link rel="stylesheet" href="mystyle.css"> Conseil : Pour tout savoir sur le CSS, visitez notre Tutoriel CSS .
L'élément HTML <meta>
L'élément <meta> est généralement utilisé pour spécifier l'ensemble de caractères, la description de la page, les mots-clés, l'auteur du document et les paramètres de la fenêtre d'affichage.
Les métadonnées ne seront pas affichées sur la page, mais sont utilisées par les navigateurs (pour afficher le contenu ou recharger la page), par les moteurs de recherche (mots-clés) et d'autres services web.
Exemples
Définir l'ensemble de caractères utilisé :
<meta charset="UTF-8"> Définir des mots-clés pour les moteurs de recherche :
<meta name="keywords" content="HTML, CSS, JavaScript"> Définir une description de votre page web :
<meta name="description" content="Tutoriels Web gratuits"> Définir l'auteur d'une page :
<meta name="author" content="John Doe"> Rafraîchir le document toutes les 30 secondes :
<meta http-equiv="refresh" content="30"> Définir la fenêtre d'affichage pour que votre site web soit agréable sur tous les appareils :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Exemple de balises <meta> :
Exemple
<meta charset="UTF-8">
<meta name="description" content="Tutoriels Web gratuits">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Définir la fenêtre d'affichage
La fenêtre d'affichage est la zone visible d'une page web pour l'utilisateur. Elle varie selon l'appareil - elle sera plus petite sur un téléphone mobile que sur un écran d'ordinateur.
Vous devez inclure l'élément <meta> suivant dans toutes vos pages web :
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Cela donne des instructions au navigateur sur la façon de contrôler les dimensions et le zoom de la page.
La partie width=device-width définit la largeur de la page pour qu'elle corresponde à la largeur de l'écran de l'appareil (qui variera en fonction de l'appareil).
La partie initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.
Voici un exemple d'une page web sans la balise meta de la fenêtre d'affichage, et la même page web avec la balise meta de la fenêtre d'affichage :
Conseil : Si vous parcourez cette page avec un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessous pour voir la différence.
L'élément HTML <script>
L'élément <script> est utilisé pour définir des JavaScripts côté client.
Le JavaScript suivant écrit "Hello JavaScript!" dans un élément HTML avec id="demo" :
Exemple
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script> Conseil : Pour tout savoir sur JavaScript, visitez notre Tutoriel JavaScript .
L'élément HTML <base>
L'élément <base> spécifie l'URL de base et/ou la cible pour toutes les URL relatives dans une page.
La balise <base> doit avoir soit un attribut href, soit un attribut target présent, ou les deux.
Il ne peut y avoir qu'un seul élément <base> dans un document !
Exemple
Spécifiez une URL par défaut et une cible par défaut pour tous les liens sur une page :
<head>
<base href="https://www.formation-ti.org/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">Balise HTML base</a>
</body>
Résumé du chapitre
- L'élément
<head>est un conteneur pour les métadonnées (données sur les données) - L'élément
<head>se situe entre la balise<html>et la balise<body> - L'élément
<title>est requis et définit le titre du document - L'élément
<style>est utilisé pour définir des informations de style pour un seul document - La balise
<link>est le plus souvent utilisée pour lier des feuilles de style externes - L'élément
<meta>est généralement utilisé pour spécifier l'ensemble de caractères, la description de la page, les mots-clés, l'auteur du document et les paramètres de la fenêtre d'affichage - L'élément
<script>est utilisé pour définir des JavaScripts côté client - L'élément
<base>spécifie l'URL de base et/ou la cible pour toutes les URL relatives dans une page
Éléments de tête HTML
| Balise | Description |
|---|---|
| <head> | Définit des informations sur le document |
| <title> | Définit le titre d'un document |
| <base> | Définit une adresse par défaut ou une cible par défaut pour tous les liens sur une page |
| <link> | Définit la relation entre un document et une ressource externe |
| <meta> | Définit des métadonnées sur un document HTML |
| <script> | Définit un script côté client |
| <style> | Définit des informations de style pour un document |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des balises HTML .