Table ASCII – Tableau des codes de caractères des valeurs Hex vers ASCII

Article original : ASCII Table – Hex to ASCII Value Character Code Chart

En tant que développeur, vous aurez éventuellement besoin de rechercher des valeurs hexadécimales ou ASCII et de voir à quoi elles correspondent. Vous pourriez également avoir besoin de connaître les valeurs décimales, binaires ou HTML.

Si vous recherchez ces codes en ligne, vous trouverez souvent des tableaux qui ne sont que des images. Ceux-ci sont inaccessibles aux personnes handicapées et peu pratiques à utiliser – vous ne pouvez pas rechercher quelque chose et copier-coller le code que vous voulez.

Pour vous faciliter la vie, j'ai créé un tableau à partir des meilleures sources que j'ai pu trouver. Il vous suffit de faire défiler ou d'utiliser Ctrl/Cmd + f pour trouver la valeur que vous recherchez.

Voici le tableau ASCII traditionnel :

Et voici le tableau ASCII étendu pour le web :

Sources pour les deux tableaux : ASCII, Windows-1252, et ASCII Code - The extended ASCII table

Notez qu'il existe plusieurs autres tableaux ASCII étendus comme ISO 8859, ISO 8859-1, ISO 8859-2, et ainsi de suite. Le tableau étendu ci-dessus est basé sur le tableau ASCII Windows-1252, et est ce que les navigateurs web utilisaient avant la création de l'UTF-8.

Même si nous avons largement dépassé l'ASCII et ses limitations pour des encodages de caractères modernes comme l'UTF-8, toutes les valeurs HTML dans les tableaux ci-dessus fonctionneront toujours sur les navigateurs actuels.

Si vous souhaitez en savoir plus sur l'encodage des caractères, l'ASCII et les caractères Unicode, consultez cet article.

Comment utiliser les caractères ASCII en HTML

Les caractères ASCII peuvent être utiles pour les développeurs web, par exemple si vous devez insérer manuellement un espace ou un caractère spécial dans votre HTML.

Si vous regardez les tableaux ci-dessus, vous verrez que chaque caractère ASCII a un numéro d'entité HTML, et certains ont également un nom d'entité HTML.

Chaque numéro et nom d'entité HTML commence par un esperluette (&) et se termine par un point-virgule (;).

Vous pouvez utiliser ceux-ci n'importe où dans votre HTML pour rendre ce caractère de manière fiable, peu importe la langue du navigateur de la personne.

En général, il est recommandé d'utiliser le nom de l'entité HTML chaque fois que possible – ils sont plus faciles à retenir et sont auto-descriptifs pour les autres développeurs qui lisent votre code.

Par exemple, si vous devez rendre le signe de la monnaie Euro (€), le nom de l'entité HTML € est beaucoup plus facile à retenir que €.

Voici quelques-uns des caractères ASCII les plus courants que vous utiliserez en HTML, ainsi que quelques exemples.

Comment utiliser le caractère d'espace insécable  

Il arrive que vous souhaitiez ajouter un espace, mais que vous souhaitiez garder d'autres mots ou caractères ensemble, même s'il y a un espace horizontal limité.

Une façon simple de faire cela serait d'utiliser un caractère d'espace insécable, par exemple :

<span>Superpouvoir :&nbsp;écoute</span>

Ce qui rend le suivant :

Superpouvoir : écoute

Bien sûr, il semble qu'il y ait un espace normal entre les deux-points et le "l" dans "écoute", mais le caractère   fait en sorte que la ligne ne se brisera jamais à cet endroit.

Par exemple, voici ce code avec un contour autour de l'élément span, et avec une largeur de 150 pixels :

Superpouvoir : écoute

Avec un caractère d'espace normal, la ligne se briserait comme ceci :

Superpouvoir : écoute

Vous pouvez même insérer plusieurs espaces insécables à la suite pour créer un rembourrage de texte improvisé :

<span>Superpouvoir :&nbsp;&nbsp;&nbsp;écoute</span>

Comment faire un saut de ligne en HTML en utilisant le code de caractère de nouvelle ligne 


Bien que vous puissiez utiliser JavaScript pour rendre \n comme une nouvelle ligne en HTML, ce n'est pas toujours une option. Vous pourriez n'avoir accès qu'au code HTML, ou simplement vouloir garder les choses simples.

Dans ce cas, vous pouvez utiliser le code de caractère de nouvelle ligne / saut de ligne pour forcer une nouvelle ligne :

<div style="margin-bottom: 1.5em;">
  <label for="example-1">Exemple 1 : </label>
  <textarea name="example-1" id="example-1">Bonjour&#10;freeCodeCamp</textarea>
</div>

Ce qui rend le suivant :

Et oui, vous pouvez les utiliser dos à dos, aussi :

<div style="margin-bottom: 1.5em;">
  <label for="example-2">Exemple 2 : </label>
  <textarea name="example-2" id="example-2" style="height: 150px;">Bonjour&#10;&#10;&#10;freeCodeCamp</textarea>
</div>

Cependant, notez que le caractère 
 ne remplace pas le style par défaut de l'élément dans lequel il est utilisé. Par exemple, l'élément p ne permet pas les sauts de ligne à l'intérieur de l'élément – vous devriez créer un autre élément de paragraphe :

<p style="outline: red 1px solid;">Ceci est un texte de paragraphe et &#010; oops il y a une nouvelle ligne.</p>

Le code ci-dessus rend tout en une seule ligne :

Ceci est un texte de paragraphe et oops il y a une nouvelle ligne.

Pour remplacer ce comportement, il suffit de définir la propriété white-space sur pre-wrap :

<p style="outline: red 1px solid; white-space: pre-wrap;">Ceci est un texte de paragraphe et &#010; oops il y a une nouvelle ligne.</p>

Ceci est un texte de paragraphe et oops il y a une nouvelle ligne.

Merci d'avoir lu

Si vous avez trouvé cela utile, veuillez le partager avec vos amis afin que plus de personnes puissent commencer à utiliser les caractères ASCII.

De plus, si vous avez aimé cet article, faites-le moi savoir sur Twitter.