Comment utiliser des caractères spéciaux en HTML

Les pages Web que vous visitez en ligne sont construites en utilisant HTML code qui indique aux navigateurs Web quel est le contenu de la page et comment le rendre visuellement pour les téléspectateurs. Le code contient des blocs de construction d'instructions appelés éléments, que la visionneuse de pages Web ne voit jamais. Le code contient également des caractères de texte normaux tels que ceux des titres et des paragraphes conçus pour être lus par le spectateur.

Le rôle des caractères spéciaux en HTML

Lorsque vous utilisez HTML et tapez le texte conçu pour être affiché, vous n'avez généralement pas besoin de codes spéciaux - vous utilisez simplement le clavier de votre ordinateur pour ajouter les lettres ou les caractères appropriés. Un problème survient lorsque vous souhaitez saisir un caractère dans le texte lisible que HTML utilise dans le cadre du code lui-même. Ces caractères comprennent le < et > caractères qui sont utilisés dans le code pour commencer et terminer chaque balise HTML. Vous pouvez également inclure des caractères dans le texte qui n'ont pas d'analogue direct sur le clavier, tels que

instagram viewer
© et Ñ. Pour les caractères qui n'ont pas de touche sur votre clavier, vous entrez un code.

Caractères spéciaux.
ASC Images / Getty Images

Les caractères spéciaux sont des morceaux spécifiques de code HTML conçus pour afficher des caractères utilisés dans le code HTML ou d'inclure des caractères qui ne se trouvent pas au clavier dans le texte que le visualiseur voit. HTML restitue ces caractères spéciaux avec un codage numérique ou de caractères afin qu'ils puissent être inclus dans un document HTML, lu par le navigateur et affiché correctement pour les visiteurs de votre site.

Il y a trois caractères au cœur de la syntaxe du code HTML. Vous ne devez jamais les utiliser dans les parties lisibles de votre page Web sans les encoder au préalable pour un affichage correct. Ce sont les symboles supérieur à, inférieur à et esperluette. En d'autres termes, vous ne devez jamais utiliser le symbole inférieur à < dans votre code HTML sauf s'il s'agit du début d'un Balise HTML. Si vous le faites, le caractère confond les navigateurs et vos pages risquent de ne pas s'afficher comme prévu. Les trois caractères que vous ne devez jamais ajouter non codés sont:

  • signe inférieur à <
  • signe supérieur à >
  • esperluette &

Lorsque vous saisissez ces caractères directement dans votre code HTML, à moins que vous ne les utilisiez en tant qu'éléments du code, saisissez leur encodage afin qu'ils s'affichent correctement dans le texte lisible:

  • signe inférieur à — <
  • signe supérieur à — >
  • esperluette — &

Chaque caractère spécial commence par une esperluette — même le caractère spécial pour esperluette commence par ce caractère. Les caractères spéciaux se terminent par un point-virgule. Entre ces deux caractères, vous ajoutez tout ce qui convient au caractère spécial que vous souhaitez ajouter. ll (pour moins que) crée le symbole inférieur à lorsqu'il apparaît entre l'esperluette et le point-virgule en HTML. De même, gt crée le symbole supérieur à et ampli produit une esperluette lorsqu'ils sont placés entre un esperluette et point-virgule.

Caractères spéciaux que vous ne pouvez pas saisir

Tout caractère pouvant être rendu dans le jeu de caractères standard Latin-1 peut être rendu en HTML. S'il n'apparaît pas sur votre clavier, vous utilisez le symbole esperluette avec le code unique qui a été attribué au caractère suivi du point-virgule.

Par exemple, le "code convivial" pour le Symbole du droit d'auteur est © et ™ est le code du symbole de la marque.

Ce code convivial est facile à saisir et à mémoriser, mais il y a beaucoup de caractères qui n'ont pas de code convivial facile à mémoriser.

Chaque caractère qui peut être tapé à l'écran a un code numérique décimal correspondant. Vous pouvez utiliser ce code numérique pour afficher n'importe quel caractère. Par exemple, le code numérique décimal du symbole de copyright — © — démontrermontrer que les codes numériques fonctionnent. Ils commencent toujours par une esperluette et se terminent par un point-virgule, mais au lieu d'un texte convivial, vous utilisez le signe dièse suivi d'un code numérique unique pour ce caractère.

Les codes conviviaux sont faciles à retenir, mais les codes numériques sont souvent plus fiables. Des sites construits avec des bases de données et XML peuvent ne pas avoir tous les codes conviviaux définis, mais ils prennent en charge les codes numériques.

La meilleure façon de trouver les codes numériques des caractères consiste à utiliser des jeux de caractères que vous pouvez trouver en ligne. Lorsque vous trouvez le symbole dont vous avez besoin, copiez et collez simplement le code numérique dans votre code HTML.

Certains jeux de caractères incluent:

  • Codes de devise
  • Codes mathématiques
  • Codes de ponctuation
  • Codes de prononciation
  • Codes diacritiques

Caractères non anglophones

Les caractères spéciaux ne sont pas limités à la langue anglaise. Les caractères spéciaux dans les langues autres que l'anglais peuvent être exprimés en HTML, notamment:

  • Espanol
  • français
  • grec
  • roumain

Alors, que sont les codes hexadécimaux?

Code hexadécimal est un format alternatif pour l'affichage des caractères spéciaux dans le code HTML. Vous pouvez utiliser la méthode que vous souhaitez pour votre page Web. Vous les recherchez dans des jeux de caractères en ligne et les utilisez de la même manière que vous utilisez des codes conviviaux ou des codes numériques.

Ajoutez la déclaration Unicode à votre en-tête de document

Ajoutez la balise meta suivante n'importe où à l'intérieur du fichier.

content="texte/html; jeu de caractères=utf-8" />

Conseils

Quelle que soit la méthode que vous utilisez, gardez à l'esprit quelques bonnes pratiques:

Terminez toujours votre entité par un point-virgule

Certains éditeurs HTML vous permettent de publier des codes HTML sans le point-virgule final, mais vos pages seront invalides et de nombreux navigateurs Web n'afficheront pas correctement les entités sans lui.

Commencez toujours par une esperluette

De nombreux éditeurs Web vous permettent de vous en sortir en omettant le « amp; » mais quand vous affichez une esperluette seule dans XHTML, cela provoque une erreur de validation.

Testez vos pages dans autant de navigateurs que possible

Si le caractère est crucial pour comprendre votre document et que vous ne pouvez pas le tester dans les combinaisons navigateur/système d'exploitation que vos clients utilisent, vous devriez trouver une autre façon de le représenter. Cependant, avant de recourir à des images ou à autre chose, essayez l'un des outils de test de navigateur qui peuvent valider votre code dans plusieurs navigateurs.