4. Ajouter un titre à notre page

Dans le chapitre précédent, nous avons intégré une structure dans notre page HTML, mais pour l’instant, le “head” est toujours vide. Je vous avais dit qu’il permettait d’ajouter un titre dans l’onglet de notre page. Eh bien c’est ce que nous allons faire maintenant.

Comme tout en HTML, le titre, vous vous en doutez sûrement, est une balise. Une nouvelle balise que nous ajoutons à notre collection 🤩 : la balise “title”.

Elle est très simple à utiliser, il suffit d’écrire le titre de notre page entre les deux, comme d’habitude :

<head>
  <title>Pokédex</title>
</head>

Ici, je ne vous montre qu’un extrait du code, mais il y a bien entendu tout le reste, que nous avons fait dans l’étape précédente. Maintenant que notre fichier commence à se remplir, je ne mettrai pas tout le code à chaque fois, mais uniquement la partie qui nous intéresse.

Maintenant, il ne nous reste plus qu’à voir ce que ça donne :

Jusque là tout va bien, parce que je suis sur Google Chrome, mais si on va sur un autre navigateur comme Safari ou Internet Explorer, on constate ça :

Alors là, vous allez me dire : “Mais qu’est-ce que c’est que ces signes bizarres à la place du ‘é’?”.

C’est ce qu’on appelle un problème d’encodage, mais on verra cela dans la prochaine étape. Pour l’instant, retenez juste que la balise <title> permet d’ajouter un titre. Petit rappel : il faut qu’elle soit placée dans le “head”, puisqu’il s’agit d’un des éléments de “configuration” de la page.

Dans la prochaine étape, nous corrigerons ce petit problème d’accent, ce n’est pas possible de garder notre titre comme ça !