Une erreur de script s'est produite sur cette page. En attendant qu'elle soit traitée par les éditeurs du site, vous pouvez consulter le contenu partiel ci-dessous.

{{ PreviousMenu
Next }}

L'en-tête "head" d'un document HTML est la partie qui ne sera pas affichée dans le navigateur quand la page est chargée. Il contient des informations comme le titre "<title>" de la page, le lien du style  CSS (si vous voulez styliser votre contenu HTML avec le CSS), les liens pour personnaliser les favicons, et autres métadonnées (les informations sur le code, comme l'auteur, les mots-clés qui caractérisent le document). Dans cet article, nous allons couvrir tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans votre en-tête.

Prérequis: Connaître les bases du HTML, telles qu'elles sont exposées dans l'article Commencer avec le HTML
Objectifs: En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.

Qu'est-ce que l'en-tête de HTML ?

Revoyons le document HTML de base de l' article précédent:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ma page test</title>
  </head>
  <body>
    <p>Voici ma page</p>
  </body>
</html>

Le contenu de l'en-tête HTML <head> — à la difference du contenu de la balise <body> (corps, qui est affiché dans le navigateur quand la page est chargée), n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les metadata à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :

<head>
  <meta charset="utf-8">
  <title>Ma page test</title>
</head>

Dans la majeure partie des pages, l'en-tête contient un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les outils de développement pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans la balise <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.

Ajout d'un titre

Nous avons déjà vu l'élément <title> — qui peut être utilisé pour ajouter un titre au document. Il peut toutefois être confondu avec l'élément <h1>, qui est utilisé pour ajouter un titre au contenu de votre page dans la balise <body> — ce terme (title) est également appelé parfois "titre de page". Mais ce sont des choses différentes !

  • L'élément <h1> apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié).
  • L'élément <title> est une métadonnée qui représente le titre du document HTML global (non le contenu du document).

Apprentissage actif : Inspection d'un exemple simple 

  1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre  page-titre-exemple sur notre compte Github. Pour faire cela,
    1. Copiez et collez le code hors de la page et dans un nouveau fichier texte dans votre éditeur de code, puis enregistrez-le dans un endroit raisonnable.
    2. Appuyez sur le bouton "Raw" sur la page, ce qui fait apparaître le texte brut dans un nouvel onglet du navigateur. Ensuite, choisissez Fichier> Enregistrer la page sous ... dans le menu de votre navigateur, puis choisissez un endroit pour enregistrer le fichier.
  2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça :

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Il est désormais évident pour vous de situer les contenus de <h1> et <title> !

  3. Vous devriez aussi essayer d'ouvrir le code dans votre éditeur de code, modifier le contenu de ces éléments, et ensuite rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.

Le contenu de l'élément <title> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( Marques-pages > Marquer cette page ou bien l'étoile dans la barre d'outils), vous verrez que le contenu de <title> est équivalent au nom du Marque-page.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

Le contenu de <title> est aussi utilisé dans le résultat des recherches, comme vous le verrez en-dessous.

Métadonnées : L'élément <meta>

Les métadonnées sont des données qui décrivent les données, et le langage HTML a une manière  « officielle » d'ajouter des métadonnées à un document — l'élément <meta> . Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <meta> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.

Définition de l'encodage des caractères de votre document

Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :

<meta charset="utf-8">

Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. utf-8 est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun soucis :

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Si vous définissez votre encodage de caractères en ISO-8859-1 , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement dérangé :

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Apprentissage actif : Expérimentation de l'encodage des caractères

Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <title> (la page title-example.html), essayez de modifier la valeur de la meta charset en ISO-8859-1 et ajoutez le japonais à votre page . C'est le code que nous avons utilisé :

<p>Japanese example: ご飯が熱い。</p>

Ajout  d'un auteur et d'une description

De nombreux éléments <meta> incluent des attributs de nom et de contenu :

  • name précise de quel type de méta élément il s'agit ; quel type d'informations il contient.
  • content précise le contenu de la méta.

Ces deux méta-éléments sont utiles à inclure sur votre page, ils définissent son auteur, et fournissent une description claire de son contenu. Voyons un exemple :

<meta name="author" content="Chris Mills">
<meta name="description" content="Le domaine d'apprentissage MDN vise à fournir
aux débutants sur le Web tout ce qu'ils doivent savoir pour commencer le développement de pages webs et d'applications.">

Préciser l'auteur peut être utile : déterminez qui a écrit la page et contactez-le pour poser des questions à propos du contenu si vous le souhaitez. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.

La spécification d'une description qui inclut des mots-clés relatifs au contenu de votre page est utile, car elle permet de faire apparaître votre page plus haut dans les résultats des  moteurs de recherche (ces activités sont nommées optimisation du moteur de recherche.)

Apprentissage actif : Utilisation des descriptions dans les moteurs de recherche.

La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.

  1. Allez sur la page d'accueil de Mozilla Developer Network.
  2. Regardez la source de la page (Clique droit, choissisez « View Page Source » dans le menu contextuel.)
  3. Trouvez la méta-étiquette de description  (aussi appelée meta tag):
    <meta name="description" content="Le Mozilla Developer Network (MDN) fournit
    des informations sur des technologies du web ouvert incluant HTML, CSS, et APIs pour
    sites Web et applications HTML5. Il documente également les produits Mozilla comme Firefox OS.">
  4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (Dans l'exemple ci-dessous, c'est Yahoo). Vous remarquerez que le contenu de la <meta> description et de l'élément <title> sont utilisés dans les résultats de recherche. Cela vaut vraiment le détour !

    A Yahoo search result for "Mozilla Developer Network"

Note : Sur Google, vous verrez quelques sous-pages de MDN listées sous le lien de la page d'accueil - ce sont des liens de sites qui sont configurables dans les outils de Google's webmaster tools - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.

Note: Plusieurs fonctions de <meta> ne sont plus utilisées. Par exemple, le <meta> élément mot-clé (<meta name= "keywords" content="mettez, vos, mot-clefs, ici">) — qui est censé fournir des mots-clefs pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les spammeurs remplissaient simplement la liste avec des centaines de mots-clefs, biaisant les résultats.

Autres types de métadonnées

En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;

Par exemple, Open Graph Data est un protocole de métadonnées que facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="Le Mozilla Developer Network (MDN) fournit
des informations sur des technologies du web ouvert incluant HTML, CSS, et APIs pour sites Web
et applications HTML5. Il documente également les produits Mozilla, comme Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

En conséquence, lorsque vous liez MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter. Par exemple:

<meta name="twitter:title" content="Mozilla Developer Network">

Ajout d'icônes personnalisées à votre site

Pour enrichir davantage la conception de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.

L'humble favicon, qui existe depuis de nombreuses années, était la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez les favicons affichés dans l'onglet du navigateur contenant chaque page ouverte et à côté des pages marquées dans le panneau des signets.

Un favicon peut être ajouté à votre page de la façon suivante :

  1. Enregistrez-le dans le même répertoire que la page d'index du site, sous le format .ico (la plupart des navigateurs prendront en charge les favicons dans des formats plus communs comme .gif or .png, mais utiliser le format ICO assurera qu'il fonctionne jusqu'à Internet Explorer 6.)
  2. Ajoutez la ligne suivante dans votre <head> HTML pour le référencer :
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Voici un exemple de favicon dans un panneau de favoris :

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :

<!-- troisième-génération iPad avec haute-résolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone avec haute-résolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- première- et deuxième-génération iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, et Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

Les commentaires expliquent à quoi chaque icône est utilisée — ces éléments couvrent notamment la fourniture d'une belle icône haute résolution à utiliser lorsque le site est enregistré sur l'écran d'accueil d'un iPad.

Ne vous inquiétez pas trop de la mise en œuvre de tous ces types d'icône maintenant — il s'agit d'une fonctionnalité assez avancée, que vous n'avez pas besoin de connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent, au cas où vous les rencontriez en naviguant sur le code source d'un autre site web.

Application de CSS et JavaScript au HTML

À peu près tous les sites web que vous rencontrerez actuellement utiliseront CSS pour leur donner un style personnalisé, et JavaScript pour assurer les fonctionnalités interactives, telles que les lecteurs vidéo, les cartes géographiques, les jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments <link> et <script>.

  • L'élément <link> passe toujours dans l'en-tête de votre de document. Il comporte deux attributs, rel="stylesheet" qui indique que c'est la feuille de style du document, et href qui contient le chemin d'accès au fichier la contenant :

    <link rel="stylesheet" href="mon_fichier_css.css">
  • L'élément <script> ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture </body>), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant d'essayer d'y appliquer JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur lancera une erreur).

    <script src="mon-fichier-js.js"></script>

    Note : L'élément <script> peut ressembler à un élément vide, mais ce n'est pas le cas, et il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre votre script à l'intérieur du<script>.

Apprentissage actif : Application de CSS et JavaScript à une page

  1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers meta-example.html, script.js et style.css , et enregistrez-les sur votre ordinateur local dans le même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.
  2. Ouvrez le fichier HTML dans votre navigateur et votre éditeur de texte.
  3. En suivant les informations fournies ci-dessus, ajoutez les éléments <link> et <script> à votre HTML, afin que vos CSS et JavaScript soient appliqués à votre HTML.

Si cela se fait correctement, lorsque vous enregistrez votre HTML et actualisez votre navigateur, vous verrez que les choses ont changé :

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier.
  • Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS).

Note : Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page css-and-js.html .

Définition de la langue principale du document

Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'attribut langue à l'étiquette d'ouverture HTML (voir meta-example.html.)

<html lang="fr">

Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes ayant une déficience visuelle à l'aide de lecteurs d'écran (par exemple, le mot " six "existe en français et en anglais, mais se prononce différemment.)

Vous pouvez également définir des sous-sections de votre document pour être reconnues comme différentes langues. Par exemple, nous pourrions définir notre section de langue japonaise pour être reconnue comme japonaise, de la manière suivante :

<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>

Ces codes sont définis par la norme ISO 639-1. Vous en trouverez plus sur Etiquettes langues en HTML et XML (en).

Résumé

Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : loella16, Pethrow, KhalilSnaake
 Dernière mise à jour par : bastosh,