Un nouveau langage pour une nouveau monde...
Pour écrire une page web, plusieurs langages peuvent être utilisés mais le HTML reste fondamental car il est universel.
Cependant, dans ses déclinaisons, sont formatage ou encodage, certaines tendances apparaissent et se confirment...
Tel qu'il a été formalisé par le W3C, le HTML ne sert pas à décrire le rendu final des pages web.
En particulier, contrairement à la publication assistée par ordinateur, HTML n'est pas conçu pour
spécifier l'apparence visuelle exacte des documents. HTML est plutôt conçu pour donner du sens aux différentes parties du texte : titre, liste, passage important, citation, etc.
Article de "HTML" (Hypertext_Markup_Language) Wikipedia
Les différents codages des caractères HTML : ISO-8859-1 ou UTF-8 ?
Le codage de la page est déclaré dans l'en-tête de la page, dans le « code source », en bonne place dans les « balises méta ».
Cette déclaration va régir le comportement du navigateur pour la lecture des pages et notamment pour l'affichage des tables de caractères.
Auparavant, le plus courant, celui déclaré par défaut dans le célèbre Dreamweaver® par exemple, était l'ISO ISO-8859-1 qui intègre l'essentiel des caractères « latins » mais aussi cyrilliques, orientaux, arabes...
Aujourd'hui, c'est l'UTF-8 qui s'est généralisé... pour sa souplesse et sa transparence.
1 - LES BASES
Exemple de page ISO
|
Texte |
| Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique. |
|
Codage ISO-8859-1 |
| Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique. |
On remarque que certains caractères sont codés (commençant par un "&"), ce sont typiquement les caractères accentués.
Exemples de caractères accentués
|
Texte |
| & é à ç " Ê â ù |
|
Codage ISO-8859-1 |
| & é à ç "& Ecirc;& acirc;& ugrave; |
Exemple de page UTF-8
|
Texte |
| Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique. |
|
Codage UTF-8 |
| Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique. |
Eh hop, pas de différence ! Vous pourrez le vérifier dans le code source de cette page. Mine de rien, ce choix de l'utilisation de l'UTF-8 se révèle très pratique, par sa simplicité et son évidence.
C'est aujourd'hui devenu la norme...
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
2 - LES USAGES
Sachez que depuis plusieurs années, le format UTF-8 prend l'avantage... et cela tombe bien car il ne nécessite aucun codage spécifique.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Exemples de caractères accentués
|
Texte |
| &éàç"Êâù |
|
Codage UTF-8 |
| &éàç"Êâù |
|
Symboles |
code clavier |
Code ISO |
Code HTML |
Description |
|
| espace | Alt+ 0160 |   | | Espace insécable | |
| ¡ | Alt+ 0161 | ¡ | ¡ | Exclamation inversée | |
| ¢ | Alt+ 0162 | ¢ | ¢ | Symbole centime | |
| £ | Alt+ 0163 | £ | £ | Symbole livre | |
| ¤ | Alt+ 0164 | ¤ | ¤ | Symbole monétaire | |
| ¥ | Alt+ 0165 | ¥ | ¥ | Signe Yen | |
| ¦ | Alt+ 0166 | ¦ | ¦ ou &brkbar; | Barre verticale interrompue | |
| § | Alt+ 0167 | § | § | Signe section | |
| ¨ | Alt+ 0168 | ¨ | ¨ ou ¨ | Tréma | |
| © | Alt+ 0169 | © | © | Copyright | |
| ª | Alt+ 0170 | ª | ª | Ordinal féminin | |
| « | Alt+ 0171 | « | « | Chevron gauche ou guillemet gauche | |
| ¬ | Alt+ 0172 | ¬ | ¬ | Signe non | |
| | Alt+ 0173 | ­ | ­ | Tiret conditionnel | |
| ® | Alt+ 0174 | ® | ® | Marque déposée | |
| ¯ | Alt+ 0175 | ¯ | ¯ ou &hibar; | Macron | |
| ° | Alt+ 0176 | ° | ° | Signe degrés | |
| ± | Alt+ 0177 | ± | ± | Plus ou moins | |
| ² | Alt+ 0178 | ² | ² | Deux exposant | |
| ³ | Alt+ 0179 | ³ | ³ | Trois exposant | |
| ´ | Alt+ 0180 | ´ | ´ | Accent aigu | |
| µ | Alt+ 0181 | µ | µ | Signe micro | |
| ¶ | Alt+ 0182 | ¶ | ¶ | Signe paragraphe | |
| · | Alt+ 0183 | · | · | Point milieu | |
| ¸ | Alt+ 0184 | ¸ | ¸ | Cédille | |
| ¹ | Alt+ 0185 | ¹ | ¹ | Un exposant | |
| º | Alt+ 0186 | º | º | Ordinal masculin | |
| » | Alt+ 0187 | » | » | Chevron droit ou guillemet droit | |
| ¼ | Alt+ 0188 | ¼ | ¼ | Fraction un quart | |
| ½ | Alt+ 0189 | ½ | ½ | Fraction un demi | |
| ¾ | Alt+ 0190 | ¾ | ¾ | Fraction trois-quarts | |
| ¿ | Alt+ 0191 | ¿ | ¿ | Point d'interrogation inversé | |
| À | Alt+ 0192 | À | À | A accent grave majuscule | |
| Á | Alt+ 0193 | Á | Á | A accent aigu majuscule | |
| Â | Alt+ 0194 | Â | Â | A accent circonflexe majuscule | |
| Ã | Alt+ 0195 | Ã | Ã | A tilde majuscule | |
| Ä | Alt+ 0196 | Ä | Ä | A tréma majuscule | |
| Å | Alt+ 0197 | Å | Å | A anneau majuscule | |
| Æ | Alt+ 0198 | Æ | Æ | AE majuscule (digramme soudé ae, lettre) | |
| Ç | Alt+ 0199 | Ç | Ç | C cédille majuscule | |
| È | Alt+ 0200 | È | È | E accent grave majuscule | |
| É | Alt+ 0201 | É | É | E accent aigu majuscule | |
| Ê | Alt+ 0202 | Ê | Ê | E accent circonflexe majuscule | |
| Ë | Alt+ 0203 | Ë | Ë | E tréma majuscule | |
| Ì | Alt+ 0204 | Ì | Ì | I accent grave majuscule | |
| Í | Alt+ 0205 | Í | Í | I accent aigu majuscule | |
| Î | Alt+ 0206 | Î | Î | I accent circonflexe majuscule | |
| Ï | Alt+ 0207 | Ï | Ï | I tréma majuscule | |
| Ð | Alt+ 0208 | Ð | Ð ou Đ | Eth islandais | |
| Ñ | Alt+ 0209 | Ñ | Ñ | N tilde majuscule | |
| Ò | Alt+ 0210 | Ò | Ò | O accent grave majuscule | |
| Ó | Alt+ 0211 | Ó | Ó | O accent aigu majuscule | |
| Ô | Alt+ 0212 | Ô | Ô | O accent circonflexe majuscule | |
| Õ | Alt+ 0213 | Õ | Õ | O tilde majuscule | |
| Ö | Alt+ 0214 | Ö | Ö | O tréma majuscule | |
| × | Alt+ 0215 | × | × | Signe infini | |
| Ø | Alt+ 0216 | Ø | Ø | O barré majuscule | |
| Ù | Alt+ 0217 | Ù | Ù | U accent grave majuscule | |
| Ú | Alt+ 0218 | Ú | Ú | U accent aigu majuscule | |
| Û | Alt+ 0219 | Û | Û | U accent circonflexe majuscule | |
| Ü | Alt+ 0220 | Ü | Ü | U tréma majuscule | |
| Ý | Alt+ 0221 | Ý | Ý | Y accent aigu majuscule | |
| Þ | Alt+ 0222 | Þ | Þ | Thorn islandais majuscule | |
| ß | Alt+ 0223 | ß | ß | s dur allemand (szet) | |
| à | Alt+ 0224 | à | à | a accent grave minuscule | |
| á | Alt+ 0225 | á | á | a accent aigu minuscule | |
| â | Alt+ 0226 | â | â | a accent circonflexe minuscule | |
| ã | Alt+ 0227 | ã | ã | a tilde minuscule | |
| ä | Alt+ 0228 | ä | ä | a tréma minuscule | |
| å | Alt+ 0229 | å | å | a rond minuscule | |
| æ | Alt+ 0230 | æ | æ | e dans l'a minuscule | |
| ç | Alt+ 0231 | ç | ç | c cédille minuscule | |
| è | Alt+ 0232 | è | è | e accent grave minuscule | |
| é | Alt+ 0233 | é | é | e accent aigu minuscule | |
| ê | Alt+ 0234 | ê | ê | e accent circonflexe minuscule | |
| ë | Alt+ 0235 | ë | ë | e tréma minuscule | |
| ì | Alt+ 0236 | ì | ì | i accent grave minuscule | |
| í | Alt+ 0237 | í | í | i accent aigu minuscule | |
| î | Alt+ 0238 | î | î | i accent circonflexe minuscule | |
| ï | Alt+ 0239 | ï | ï | i tréma minuscule | |
| ð | Alt+ 0240 | ð | ð | eth islandais minuscule | |
| ñ | Alt+ 0241 | ñ | ñ | n tilde minuscule | |
| ò | Alt+ 0242 | ò | ò | o accent grave minuscule | |
| ó | Alt+ 0243 | ó | ó | o accent aigu minuscule | |
| ô | Alt+ 0244 | ô | ô | o accent circonflexe minuscule | |
| õ | Alt+ 0245 | õ | õ | o tilde minuscule | |
| ö | Alt+ 0246 | ö | ö | o tréma minuscule | |
| ÷ | Alt+ 0247 | ÷ | ÷ | Signe division | |
| ø | Alt+ 0248 | ø | ø | o barré minuscule | |
| ù | Alt+ 0249 | ù | ù | u accent grave minuscule | |
| ú | Alt+ 0250 | ú | ú | u accent aigu minuscule | |
| û | Alt+ 0251 | û | û | u accent circonflexe minuscule | |
| ü | Alt+ 0252 | ü | ü | u tréma minuscule | |
| ý | Alt+ 0253 | ý | ý | y accent aigu minuscule | |
| þ | Alt+ 0254 | þ | þ | Thorn islandais minuscule | |
| ÿ | Alt+ 0255 | ÿ | ÿ | y tréma minuscule | |
| ℗ | ℗ | Copyright des enregistrements sonores | |||
| ! | Alt+ 033 | ! | |||
| " | Alt+ 034 | " | " | Guillemet double | |
| # | Alt+ 035 | # | # (carré ou dièse) | ||
| $ | Alt+ 036 | $ | symbole Dollar | ||
| % | Alt+ 037 | % | |||
| & | Alt+ 038 | & | & | Et commercial | |
| ' | Alt+ 039 | ' | |||
| ( | Alt+ 040 | ( | |||
| ) | Alt+ 041 | ) | |||
| * | Alt+ 042 | * | |||
| + | Alt+ 043 | + | |||
| , | Alt+ 044 | , | |||
| - | Alt+ 045 | - | |||
| . | Alt+ 046 | . | |||
| / | Alt+ 047 | / | / (barre oblique) ou "slash" | ||
| 0 | Alt+ 048 | 0 | |||
| 1 | Alt+ 049 | 1 | |||
| 2 | Alt+ 050 | 2 | |||
| 3 | Alt+ 051 | 3 | |||
| 4 | Alt+ 052 | 4 | |||
| 5 | Alt+ 053 | 5 | |||
| 6 | Alt+ 054 | 6 | |||
| 7 | Alt+ 055 | 7 | |||
| 8 | Alt+ 056 | 8 | |||
| 9 | Alt+ 057 | 9 | |||
| : | Alt+ 058 | : | Deux points | ||
| ; | Alt+ 059 | ; | Virgule | ||
| < | Alt+ 060 | < | < | Signe "inférieur à" | |
| = | Alt+ 061 | = | Signe "égal" | ||
| > | Alt+ 062 | > | > | Supérieur à | |
| ? | Alt+ 063 | ? | Point d'interrogation | ||
| @ | Alt+ 064 | @ | "a" commercial ou "arobase" | ||
| A | Alt+ 065 | A | |||
| B | Alt+ 066 | B | |||
| C | Alt+ 067 | C | |||
| D | Alt+ 068 | D | |||
| E | Alt+ 069 | E | |||
| F | Alt+ 070 | F | |||
| G | Alt+ 071 | G | |||
| H | Alt+ 072 | H | |||
| I | Alt+ 073 | I | |||
| J | Alt+ 074 | J | |||
| K | Alt+ 075 | K | |||
| L | Alt+ 076 | L | |||
| M | Alt+ 077 | M | |||
| N | Alt+ 078 | N | |||
| O | Alt+ 079 | O | |||
| P | Alt+ 080 | P | |||
| Q | Alt+ 081 | Q | |||
| R | Alt+ 082 | R | |||
| S | Alt+ 083 | S | |||
| T | Alt+ 084 | T | |||
| U | Alt+ 085 | U | |||
| V | Alt+ 086 | V | |||
| W | Alt+ 087 | W | |||
| X | Alt+ 088 | X | |||
| Y | Alt+ 089 | Y | |||
| Z | Alt+ 090 | Z | |||
| [ | Alt+ 091 | [ | Crochet fermant | ||
| \ | Alt+ 092 | \ | \ (barre oblique inversée) ou "anti-slash" |
||
| ] | Alt+ 093 | ] | Crochet fermant | ||
| ^ | Alt+ 094 | ^ | Accent circonflexe | ||
| _ | Alt+ 095 | _ | Tiret (signe "moins") | ||
| ` | Alt+ 096 | ` | |||
| a | Alt+ 097 | a | |||
| b | Alt+ 098 | b | |||
| c | Alt+ 099 | c | |||
| d | Alt+ 100 | d | |||
| e | Alt+ 101 | e | |||
| f | Alt+ 102 | f | |||
| g | Alt+ 103 | g | |||
| h | Alt+ 104 | h | |||
| i | Alt+ 105 | i | |||
| j | Alt+ 106 | j | |||
| k | Alt+ 107 | k | |||
| l | Alt+ 108 | l | |||
| m | Alt+ 0109 | m | |||
| n | Alt+ 0110 | n | |||
| o | Alt+ 0111 | o | |||
| p | Alt+ 0112 | p | |||
| q | Alt+ 0113 | q | |||
| r | Alt+ 0114 | r | |||
| s | Alt+ 0115 | s | |||
| t | Alt+ 0116 | t | |||
| u | Alt+ 0117 | u | |||
| v | Alt+ 0118 | v | |||
| w | Alt+ 0119 | w | |||
| x | Alt+ 0120 | x | |||
| y | Alt+ 0121 | y | |||
| z | Alt+ 0122 | z | |||
| { | Alt+ 0123 | { | Parenthèse ouvrante | ||
| | | Alt+ 0124 | | | Barre droite | ||
| } | Alt+ 0125 | } | Parenthèse fermante | ||
| ~ | Alt+ 0126 | ~ | ~ (tilde) | ||
| | Alt+ 0127 | ||||
| € | Alt+ 0128 | € ou € | € | Symbole Euro | |
| | Alt+ 0129 | ||||
| ‚ | Alt+ 0130 | ‚ | Apostrophe | ||
| ƒ | Alt+ 0131 | ƒ | |||
| " | Alt+ 0132 | „ | Guillemet fermant | ||
| … | Alt+ 0133 | … | Trois petits points | ||
| † | Alt+ 0134 | † | Signe de croix | ||
| ‡ | Alt+ 0135 | ‡ | |||
| ˆ | Alt+ 0136 | ˆ | |||
| ‰ | Alt+ 0137 | ‰ | |||
| Š | Alt+ 0138 | Š | |||
| ‹ | Alt+ 0139 | ‹ | < | ||
| Π| Alt+ 0140 | Π| |||
| Ž | Alt+ 0142 | Ž | |||
| Ž | Alt+ 0142 | Ž | |||
| | Alt+ 0143 | ||||
| | Alt+ 0144 | ||||
| ' | Alt+ 0145 | ‘ | | ||
| ' | Alt+ 0146 | ’ | ! | ||
| " | Alt+ 0147 | “ | |||
| " | Alt+ 0148 | ” | |||
| • | Alt+ 0149 | • | |||
| – | Alt+ 0150 | – | |||
| — | Alt+ 0151 | — | |||
| ˜ | Alt+ 0152 | ˜ | |||
| ™ | Alt+ 0153 | ™ | Marque déposée | ||
| š | Alt+ 0154 | š | |||
| › | Alt+ 0155 | › | > | ||
| œ | Alt+ 0156 | œ | œ | ||
| | Alt+ 0157 | ||||
| ž | Alt+ 0158 | ž |
En savoir plus :
L'article de Wikipedia : "HTML" (Hypertext_Markup_Language)
Sur le site d'Alsacreations.com : Comment bien déclarer l'encodage des caractères d'une page ?
Et d'autres ressources :
Les caractères HTML
La table complète des caractères ASCII
erwan-corre.com