5. Encoder les accents

Tout à l’heure, on a rajouté un titre à notre page, mais il y avait un problème avec l’accent, il y avait des caractères bizarres à la place.

Ceci s’explique par une chose très simple, c’est que la langue “de base”, c’est l’anglais, et qu’en anglais, il n’y a pas d’accents. Donc le HTML n’est pas forcément prévu pour en intégrer, et les confond avec des caractères spéciaux.

=> TODO : est-ce la vraie explications de l’encodage, aussi, est-ce que cette explication est suffisante pour des débutants ?

Mais pourquoi alors ça fonctionnait sur Google Chrome ?

Certains navigateurs récents sont assez “intelligents” pour deviner qu’en France, on a besoin d’accents, et il définissent le bon encodage tous seuls. Mais ce n’est pas le cas avec tous !

Il faut donc préciser, toujours dans le “head”, puisque c’est un élément de configuration, qu’on veut un encodage “utf-8”. Utf-8 est juste le nom de l’encodage “à l’européenne”. Il inclut les accents et toutes les variations comme le ç, ou même le ñ en espagnol. Pour le définir, il faut utiliser la balise <meta> : 

<meta charset=”utf-8”>

Voilà une balise très compliquée ! elle fonctionne en “solo”, et il y a quelque chose en plus des crochets et du type. C’est un attribut, il permet d’apporter des paramètres complémentaires à la balise, mais on en reparlera dans quelques temps. Ce qu’on peut observer, en tout cas, c’est que maintenant ça fonctionne même sur Safari :

Mais pourquoi ça ne fonctionne pas juste comme un “title” ou comme n’importe quelle balise : <meta>utf-8</meta> ?

Alors, là, je serai bien incapable de vous répondre. C’est comme ça. Pourquoi il y a deux “l” à “mille” ? Dans toutes les langues, il y a des petites choses inexplicables comme ça ; c’est pareil en HTML.

En tout cas ne vous inquiétez pas si vous ne comprenez pas le fonctionnement de cette balise, c’est normal. Pour l’instant, contentez-vous de la recopier, et on verra le “pourquoi” dans quelques étapes.

On a enfin réussi à écrire notre accent correctement sur tous les navigateurs. Maintenant qu’on n’a plus de problèmes, il est temps d’avancer sérieusement sur le contenu de notre site. dans la prochaine étape, nous allons découvrir quelques balises qui vont nous permettre d’ajouter de nouveaux éléments à notre page.