Travailler avec des éléments d'en-tête HTML - Letecode
Suivez nous
Table de matière
  1. Tutoriels
  2. Tutoriel HTML5
  3. En-tête HTML : Head
Chapitres

En-tête HTML : Head

Dernière mise à jour : 16/02/2022

Dans ce didacticiel, vous apprendrez l'importance des éléments de la balise <head>.

L'élément d'en-tête HTML

L'élément <head> est principalement le conteneur de tous les éléments d'en-tête, qui fournissent des informations supplémentaires sur le document (métadonnées) ou une référence à d'autres ressources nécessaires pour que le document s'affiche ou se comporte correctement dans un navigateur Web.

Les éléments principaux décrivent collectivement les propriétés du document telles que le titre, fournissent des méta-informations telles que le jeu de caractères, indiquent au navigateur où trouver les feuilles de style ou les scripts qui vous permettent d'étendre le document HTML de manière très active et interactive.

Les éléments HTML qui peuvent être utilisés à l'intérieur de la balise <head> sont : <title>, <base>, <link>, <style>, <meta>, <script> et l'élément <noscript>.

La balise title

L'élément <title> définit le titre du document.

 

L'élément de titre est requis dans tous les documents HTML/XHTML pour produire un document valide. Un seul élément de titre est autorisé dans un document et il doit être placé dans l'élément <head>. la balise title contient du texte brut et des entités; il ne doit pas contenir d'autres balises.

Le titre du document peut être utilisé à différentes fins. Par example:

  • Pour afficher un titre dans la barre de titre du navigateur et dans la barre des tâches.
  • Pour donner un titre à la page lorsqu'elle est ajoutée aux favoris ou mise en signet.
  • Pour afficher un titre pour la page dans les résultats des moteurs de recherche.

L'exemple suivant montre comment placer un titre dans un document HTML.

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Mon premier titre de html</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

 

Conseil : Un bon titre doit être court et spécifique au contenu du document, car les robots d'indexation des moteurs de recherche accordent une attention particulière aux mots utilisés dans le titre. Le titre doit idéalement comporter moins de 65 caractères.

La balise base

L'élément HTML <base> est utilisé pour définir une URL de base pour tous les liens relatifs contenus dans le document, par exemple, vous pouvez définir l'URL de base une fois en haut de votre page, puis tous les liens relatifs suivants utiliseront cette URL comme point de départ. Voici un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Définir un URL de base</title>
    <base href="https://www.letecode.com/">
</head>
<body>
    <p><a href="tutoriels/html5-tutoriels">Tutoriels HTML5</a>.</p>
</body>
</html>

Le lien hypertexte dans l'exemple ci-dessus se résoudra en fait https://www.letecode.com/tutoriels/html5-tutoriels quelle que soit l'URL de la page actuelle. En effet, l'URL relative spécifiée dans le lien : tutoriels/html5-tutoriels est ajoutée à la fin de l'URL de base : https://www.letecode.com/.

Avertissement : L'élément HTML <base> doit apparaître avant tout élément faisant référence à une ressource externe. HTML n'autorise qu'un seul élément de base pour chaque document.

La balise Link

L'élément <link> définit la relation entre le document actuel et un document ou une ressource externe. Une utilisation courante de l'élément de lien consiste à créer un lien vers des feuilles de style externes.

<head>
    <title>Lier une feuille de style</title>
    <link rel="stylesheet" href="style.css">
</head>

 

Remarque : La balise <head> d'un document HTML peut contenir n'importe quel nombre d'éléments <link>. L'élément <link> a des attributs, mais pas de contenu.

La balise style

La balise <style> est utilisé pour définir les informations de style incorporées pour un document HTML. Les règles de style à l'intérieur de l'élément <style> spécifient comment les éléments HTML s'affichent dans un navigateur.

<head>
    <title>Feuille de style incorporée</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>

Remarque : Une feuille de style intégrée doit être utilisée lorsqu'un seul document a un style unique. Si la même feuille de style est utilisée dans plusieurs documents, une feuille de style externe serait plus appropriée.

La balise meta

L'élément <meta> fournit des métadonnées sur le document HTML. Les métadonnées sont un ensemble de données qui décrivent et donnent des informations sur d'autres données. Voici un exemple :

<head>
    <title>Spécifier des métadonnées</title>
    <meta charset="utf-8">
    <meta name="author" content="John Smith">
</head>

L'élément meta sera expliqué plus en détail dans le chapitre suivant.

La balise script

L'élément <script> est utilisé pour définir un script côté client, tel que JavaScript dans les documents HTML.

L'exemple suivant affichera un message d'accueil dans le navigateur :

<head>
    <title>Ajout du JavaScript</title>
    <script>
        document.write("<h1>Hello World!</h1>")
    </script>
</head>

Les éléments script et noscript seront expliqués en détail dans les chapitres qui vont suivre.

 

 
Mise en page en HTML basée sur le tableau et le div Comment valider des pages HTML