Les caractères en HTML
1 - Les espaces
Tous les espaces que l'on insère dans un fichier HTML à l'aide de la barre d'espacement, de la touche tabulation et de la touche entrée ne sont pas pris en compte par le navigateur, sauf l'espace qui sépare deux mots.
C’est un avantage, car nous pouvons utiliser ces touches pour organiser au mieux la présentation du code dans nos fichiers sans nous soucier de l’impact sur l’affichage de la page. Ainsi, pour les balises de type bloc, quand une balise est imbriquée dans une autre, on a l'habitude de la décaler vers la droite à l'aide de la touche tabulation.
En respectant cette règle, on facilite la relecture du fichier, surtout quand il contient beaucoup de texte.
2 - L'encodage des fichiers de texte
D'une manière générale, en informatique, la gestion de l'affichage des caractères est assez complexe. En effet, autant de langues, autant de caractères spécifiques et ils sont très nombreux. Songez aussi aux langues écrites avec des symboles, des idéogrammes, etc., et au sens des écritures de droite à gauche ou de gauche à droite.
La plupart de ces alphabets ont été identifiés par des normes décrivant le dessin des caractères de chaque langue.
Ce qu'il faut savoir en tant que non-spécialiste dans ce domaine, c'est que tout logiciel permettant de saisir du texte doit, au moment de la création d'un fichier et de son enregistrement, l'encoder dans la norme correspondant à l'alphabet utilisé.
Ainsi, dès que l'on constate un problème d'affichage de certains caractères (les caractères accentués par exemple pour un fichier qui contient du français) c'est que le fichier a été ouvert avec le mauvais encodage. Il faut alors chercher en utilisant un menu du logiciel à modifier l'encodage du fichier avant son ouverture.
De nos jours, la norme d'encodage la plus utilisée est l'utf-8 qui est susceptible d'afficher un grand nombre d'alphabets (pour information, la norme qui définit les différents alphabets latins est l'iso-8859-1 ou latin 1).
3 - La balise <meta charset="utf-8">
Pour les fichiers HTML il est recommandé de préciser l'encodage utilisé pour permettre aux navigateurs d'afficher correctement les caractères.
Mais il faut d’abord vérifier quel est l’encodage par défaut utilisé par le logiciel à partir duquel on crée les fichiers. La plupart des éditeurs de texte encodent par défaut les fichiers avec la norme utf-8.
Si vous utilisez l'éditeur de texte ®Phœnix Code, vous trouverez cette information ici :
Une fois assuré de l'encodage du fichier, on peut utiliser la balise <meta charset="utf-8"> en indiquant la même norme pour assurer l'affichage correct des caractères. L'attribut charset veut dire alphabet et la valeur "utf-8" correspond à la norme de l'alphabet.
La balise <meta charset="utf-8"> doit être insérée dans la balise <head> si possible avant la balise <title> susceptible de comporter des caractères accentués.
4 - Les entités
Une autre manière de gérer l'affichage correct des caractères accentués et spéciaux est de faire appel aux entités. Certains utilisent les deux méthodes (entités et balise <meta charset="…"> ) pour garantir l'affichage des caractères, mais cela demande plus de travail pour un risque faible.
Une entité s'écrit de la manière suivante : &nomOuNumeroEntite;.
Exemples :
- La lettre é correspond à l'entité
éoué. - La lettre É correspond à l'entité
ÉouÉ - La lettre à correspond à l'entité
àouà - Le mot électricité peut donc s'écrire de la manière suivante en utilisant les entités :
électricité
Convenez que saisir tous les caractères accentués à l'aide des entités est un peu fastidieux, et on utilisera plutôt la balise <meta charset="…"> pour la gestion de l'affichage des caractères.
Toutefois, il ne faut pas abandonner si rapidement les entités, car elles peuvent être très utiles pour obtenir certains caractères spéciaux.
Par exemple, dans toutes les pages de ce site web, je vous affiche de nombreuses balises HTML. Si, pour les afficher sur la page, je me contentais de les écrire comme elles devraient l’être HTML, le navigateur les interpréterait et ne les afficherait pas. La seule solution est de le "tromper" en utilisant les entités.
Ainsi, dès que l'on veut afficher dans la page une balise, il suffit d'utiliser les entités qui correspondent au chevron ouvrant < et au chevron fermant > qui entourent le nom des balises.
Par exemple, pour afficher la balise ouvrante <h1> on écrira <h1>. En effet, l'entité < (lt pour less than) représente le signe plus petit que et l'entité > (gt pour greater than) le signe plus grand que.
Enfin, des caractères très particuliers peuvent être affichés à l'aide des entités comme :
→pour une flèche orientée vers la droite : →←pour une flèche orientée vers la gauche : ←↑pour une flèche orientée vers le haut : ↑↓pour une flèche orientée vers le bas : ↓&pour afficher l'esperluette : &¼pour afficher un quart : ¼£pour afficher la devise livre : £- etc.
Il existe une entité très utile qui permet de créer une espace insécable. Une espace insécable permet de séparer deux mots et de s'assurer qu'ils ne seront jamais séparés si le mot le plus à droite atteint la fin d'une ligne. Si celui-ci doit passer à la ligne suivante, il entraînera avec lui le mot qui le précède.
Par exemple, si l'on veut que l'expression 2 000 € reste toujours groupée pour ne pas que l'€ se retrouve seul en début de ligne, on écrira les espaces avec l'entité (pour "no break space") comme suit : 2 000 €
Vous trouverez une liste des principales entités sur le site de Wikipedia, mais aussi sur de très nombreux autres sites web.