Du fait de la jeunesse du média et d’un manque d’information, la ponctuation sur le Web est souvent malmenée. Vous trouverez dans le tableau suivant les règles qu’il faut employer et les solutions que j’utilise pour respecter au mieux ces dernières (tout en assurant une compatibilité navigateur importante).
| Signes | Espace avant | Espace après | Code HTML |
|---|---|---|---|
| point | aucun | espace (sauf en fin de paragraphe) | . |
| point-virgule | espace fine insécable | espace | ; voire<span class="fine"> </span>; |
| deux-points | espace insécable | espace | : |
| point d’exclamation | espace fine insécable | espace | ! voire<span class="fine"> </span>!; |
| point d’interrogation | espace fine insécable | espace | ? voire<span class="fine"> </span>?; |
| virgule | aucun | un espace | , |
| trait d’union | aucun | pas d’espace | - |
| tiret | espace insécable | espace insécable | – |
| tiret long | espace insécable | espace insécable | — |
| guillemet ouvrant | espace | espace insécable | « |
| guillemet fermant | espace insécable | espace | » |
| barre de fraction | espace fine insécable | espace fine insécable | / voire<span class="fine"> </span>/<span class="fine"> </span> |
| apostrophe | aucun | pas d’espace | ’ |
| points de suspension | aucun | un espace | … |
| parenthèse ouvrante | espace | pas d’espace | ( |
| parenthèse fermante | aucun | espace | ) |
| crochet ouvrante | espace | pas d’espace | [ |
| crochet fermante | aucun | espace | ] |
Notez que :
- on associera si besoin dans notre feuille de style cette règle :
.fine{font-size:30%} - les espaces insécables différent des espaces normaux car ils ne peuvent pas être séparés des mots qu’ils séparent par un éventuel retour à la ligne ;
- l’apostrophe et le trait d’union, ne sont pas des ponctuations mais des signes grammaticaux ;
- l’encodage des entités ne pose aucun problème dans la balise
<title>et l’attributaltpar exemple ; - l’apostrophe français s’écrit
’et non'; - les guillemets français s’écrivent
« »et non" "; - les points de suspension s’écrivent
…et non...; - les différences entre les tirets et le trait d’union pourra faire l’objet d’un petit billet ;
- tout comme il est prévu également un billet sur les signes diacritiques, les symboles typographiques, mathématiques et monétaires.
Et attention à ne pas croire que ces règles relèvent du détail, l’affichage est est parfois fortement impacté. Katsoura écrivait récemment un billet à ce sujet.
On trouve d’ailleurs de plus en plus de CMS ou d’outils qui respectent automatiquement ces règles (SPIP, Dotclear, Markdown).