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 de métadonnées (données sur les données) et est placé entre l'élément <html> et la balise <body>.
Les métadonnées HTML sont des données sur le document HTML. Les métadonnées ne sont pas affichées.
Les métadonnées définissent généralement le titre du document, le jeu de caractères, les styles, les scripts et d'autres méta-informations.
L'élément HTML <title>
L'élément <title> définit le titre du document. Le titre doit être composé uniquement de texte et il est affiché 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 du titre d’une 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écider de l'ordre lors de la liste des pages dans les résultats de recherche.
L'élément <title> :
- définir 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
Alors, essayez de rendre le titre aussi précis et significatif que possible !
Un simple document HTML :
Exemple
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Try it Yourself »
L'élément HTML <style>
L'élément <style> est utilisé pour définir les informations de style pour une seule page HTML :
Exemple
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Try it Yourself »
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 créer un lien vers des feuilles de style externes :
Astuce : Pour tout savoir sur CSS, visitez notre Tutoriel CSS.
L'élément HTML <meta>
L'élément <meta> est généralement utilisé pour spécifier le jeu 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 (comment afficher le contenu ou recharger la page), par les moteurs de recherche (mots-clés) et d'autres services Web.
Exemples
Définissez le jeu 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éfinissez une description de votre page Web :
<meta name="description" content="Free Web tutorials">
Définir l'auteur d'une page :
<meta name="author" content="John Doe">
Actualiser le document toutes les 30 secondes :
<meta http-equiv="refresh" content="30">
Définir la fenêtre d'affichage pour que votre site Web s'affiche bien 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="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Try it Yourself »
Définition de la fenêtre
La fenêtre d'affichage est la zone visible d'une page Web par l'utilisateur. Cela varie selon l'appareil : il sera plus petit 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 au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.
La partie width=device-width définit la largeur de la page pour qu'elle suive la largeur de l'écran de l'appareil (qui varie en fonction de l'appareil).
La partie initial-scale=1.0 définit le niveau de zoom initial lors du premier chargement de la page par le navigateur.
Voici un exemple d'une page Web sans la balise méta viewport, et de la même page Web avec la balise méta viewport :
Astuce : 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 JavaScript 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>
Try it Yourself »
Astuce : 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 d'une page.
La balise <base> doit avoir soit un attribut href, soit un attribut target, 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 d'une page :
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.html">HTML base Tag</a>
</body>
Try it Yourself »
Résumé du chapitre
- L'élément
<head>est un conteneur de métadonnées (données sur les données) - L'élément
<head>est placé entre la balise<html>et la balise<body> - L'élément
<title>est obligatoire et il définit le titre du document - L'élément
<style>est utilisé pour définir les informations de style pour un seul document. - La balise
<link>est le plus souvent utilisée pour créer un lien vers des feuilles de style externes - L'élément
<meta>est généralement utilisé pour spécifier le jeu 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 le JavaScript 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 d'en-head HTML
| Balise | Description |
|---|---|
| <head> | Définit les informations sur le document |
| <title> | Définit le titre d'un document |
| <base> | Définir une adresse par défaut ou une cible par défaut pour tous les liens d'une page |
| <link> | Définit la relation entre un document et une ressource externe |
| <meta> | Définit les métadonnées sur un document HTML |
| <script> | Définir un script côté client |
| <style> | Définit les informations de style pour un document |
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML — Head — Vidéo W3Schools
Cette vidéo explique l'élément head en HTML.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
