Trois types de guillemets en informatique (guillemets typographiques)

1. "guillemets doubles"
2. 'guillemets simples'
3. `guillemets obliques`

En anglais :

1. "double quotes"
2. 'simples quotes'
3. `backticks`

On peux remarquer qu'il n'y a pas de différence entre les guillemets ouvrants et fermants.

"guillemets doubles"

Ce sont les guillemets normaux du clavier.

'guillemets simples'

C'est le signe apostrophe (comme après la lettre L de L'école)

`guillemets obliques`

C'est l'accent grave

Tout le monde ne sait pas le faire (pour Windows) au clavier alors je vais expliquer :
il faut rester appuyé sur ALTGR puis sur la touche 7è deux fois

Il faut faire ALTGR + è , è pour faire un accent grave

Mnémotechnique : l'accent grave ` est comme un antislash \ en plus petit : il suffit de faire comme si on écrivait un antislash tout en appuyant sue la touche pile à sa gauche !

ASCII

Souvent, les caractères pour coder utilisent l'ASCII (lien Wikipédia), que je surnomme "l'alphabet des codeurs", on pourra y retrouver les trois types des guillemets.

Ce qui m'avait personnellement étonné, c'est que l'accent grave et circonflexes en faisaient déjà parti en 1960, je me demandais "mais pourquoi pas l'accent aigu alors ?". À noter que le tréma ¨ n'y est pas non-plus.

    !"#$%&'()*+,-./
    0123456789:;<=>?
    @ABCDEFGHIJKLMNO
    PQRSTUVWXYZ[\]^_
    `abcdefghijklmno
    pqrstuvwxyz{|}~

Guillemets dactylographiques

Guillemets français

Composés de deux chevrons, certains les mettent au milieu de la ligne et d'autre en haut :

« Bonjour »

Guillemets anglais

On les surnomme aussi guillemets soixante-six quatre-vingt-dix-neuf parce qu'il ont une forme de 66 et 99 :

“ Hello ”

Normalement il ne faut pas les utiliser en français, mais point de vue design web, ils sont très jolis.

---

Codage

Petit reçette pour créer une concaténation, par exemple avec Javascipt pour le code suivant :

"prenom="+prenom+"voila"

1. Écrire un seul guillemet, ça en fait deux ""
2. Écrire le texte dedans, sans les guillemets"prenom=prenomvoila"
3. Surligner ce qu'on va concaténer "prenom=prenomvoila"
4. CTRL+X pour couper (copie et enlève) "prenom=voila"
5. Écrire guillemets et appuyer sur la flèche gauche "prenom=""voila"
6. Écrire deux fois l'opérateur de concaténation et appuyer sur la flèche gauche"prenom="++"voila"
7. CTRL+V pour coller "prenom="+prenom+"voila"



8. FIN/END pour amener le curseur à la fin
   on peux aussi faire CTRL+ENTRÉ pour aller directement à la ligne suivante

En général

Les guillemets sont utilisés pour écrire des textes, soit du code, soit des textes en français, soit des "textes sales", c'est-à-dire des textes avec tous les caractères possibles et imaginables, pour les commerciaux qui s'amusent à faire de l'ASCII art dans leur textarea, comme le panneau /!\ qui pose souvent des soucis.

Vous ne connaissez pas l'art ASCII ?

    Butterflies
    |    _    .    .    _
    |   (@`-._ \  / _.-'@
    |    \:: .`~\/~'. ::/
    |     \"##".()."##"/
    |      >~'""||""`~<
    |     /.:::/\/\:::.\
    |     \(@)/    \(@)/
    |      `-'.    .`-'
    hjw

    Art by David

    |   .--.      .-'.      .--.      .--.      .--.      .--.      .`-.      .--.
    |  :::::.\::::::::.\::::::::.\::::::::.\::::::::.\::::::::.\::::::::.\::::::::.\
    |  '      `--'      `.-'      `--'      `--'      `--'      `-.'      `--'      `


    |D.H., 1991           __gggrgM**M#mggg__
    |                __wgNN@"B*P""mp""@d#"@N#Nw__
    |              _g#@0F_a*F#  _*F9m_ ,F9*__9NG#g_
    |           _mN#F  aM"    #p"    !q@    9NL "9#Qu_
    |          g#MF _pP"L  _g@"9L_  _g""#__  g"9w_ 0N#p
    |        _0F jL*"   7_wF     #_gF     9gjF   "bJ  9h_
    |       j#  gAF    _@NL     _g@#_      J@u_    2#_  #_
    |      ,FF_#" 9_ _#"  "b_  g@   "hg  _#"  !q_ jF "*_09_
    |      F N"    #p"      Ng@       `#g"      "w@    "# t
    |     j p#    g"9_     g@"9_      gP"#_     gF"q    Pb L
    |     0J  k _@   9g_ j#"   "b_  j#"   "b_ _d"   q_ g  ##
    |     #F  `NF     "#g"       "Md"       5N#      9W"  j#
    |     #k  jFb_    g@"q_     _*"9m_     _*"R_    _#Np  J#
    |     tApjF  9g  J"   9M_ _m"    9%_ _*"   "#  gF  9_jNF
    |      k`N    "q#       9g@        #gF       ##"    #"j
    |      `_0q_   #"q_    _&"9p_    _g"`L_    _*"#   jAF,'
    |       9# "b_j   "b_ g"    *g _gF    9_ g#"  "L_*"qNF
    |        "b_ "#_    "NL      _B#      _I@     j#" _#"
    |          NM_0"*g_ j""9u_  gP  q_  _w@ ]_ _g*"F_g@
    |           "NNh_ !w#_   9#g"    "m*"   _#*" _dN@"
    |              9##g_0@q__ #"4_  j*"k __*NF_g#@P"
    |                "9NN#gIPNL_ "b@" _2M"Lg#N@F"
    |                    ""P@*NN#gEZgNN@#@P""

    (c'est hors-sujet je sais 😘)

Source : www.asciiart.eu

Note malheureuse : l'indenteur automatique de mon éditeur de code viens de défoncer les arts ascii...😭 J'ai dû mettre des | devant pour réparer.

HTML

• "Guillemets doubles : pour les valeurs d'attributs, ils sont facultatifs mais recommandés.
• 'Guillemets simples : pas utilisés
• `Guillemets obliques : pas utilisés

 <p id="toto" class="bonjour bonsoir">Salut</p> 

CSS

• "Guillemets doubles : peuvent être utilisés pour le texte en paramètre dans des parenthèses.
• 'Guillemets simples : même remarque que précédemment.
• `Guillemets obliques : pas utilisés

Seuls les guillemets doubles et simples sont utilisés.

Dans le CSS, les liens peuvent être mis dans des guillemets, ou non :

    propriété_css: url("https://example.com/image.png")
    propriété_css: url('https://example.com/image.png')
    propriété_css: url(https://example.com/image.png)

Source : MDN Web Docs

Méfiez-vous de l'attribut HTML style, en effet, il faudra alors échapper les guillemets

    <p style="background-image:url(\"https://example.com/image.png\")">Salut</p>
    <p style="background-image:url('https://example.com/image.png')">Salut</p>

Je vous recommanderai alors de préférer les guillemets simples ou rien du tout

Ce qui peux aussi poser problème, ce sont les noms de fichiers. Sur Windows, seul le guillemet double " est interdit pour nommer un dossier ou un fichier

En général, je déconseille pour un codeur de mettre des guillemets dans les noms des fichiers et des dossiers, et je recommande de les écrire en kébab case : sans-accent-avec-des-tirets

Ceci dit, si l'URL en question aura un nom complètement libre, je recommande les guillemets échappés.

JavaScript

• "Guillemets doubles : textes
• 'Guillemets simples : textes
• `Guillemets obliques : textes, avec interprétation des variables possibles

    let toto = "Bonjour" ;
    let titi = 'Bonjour' ;
    let tata = `Bonjour` ;

Les guillemets doubles et simples n'ont rien de particulier. Puisqu'en français il y a plus de chance de tomber sur une apostrophe plutôt qu'un guillemet, je préfère mettre les phrases françaises dans des guillemets doubles.
Aussi, n'oubliez pas qu'en JSON, les guillemets simples sont interdits
Personnellement, j'utilise des guillemets simple en JavaScript, sauf s'il y a du français ou du JSON (souvent).

Les guillemets obliques sont une copie de PHP permettent l'interprétation des variables sous une forme verbeuse

    let intEleve = 261 ;

    alert("L'école a " + intEleve + " élèves.") ; // concaténation obligatoire
    alert('L\'école a ' + intEleve + ' élèves.') ; // concaténation obligatoire + échappement de l'apostrophe
    alert(`L'école a ${intEleve} élèves.`) ;

Anatomie : dollar - accolade ouvrante - nom de la variable - accolade fermante ${maVariable}

JSON

• "Guillemets doubles : texte et noms des clés
• 'Guillemets simples : interdits...
• `Guillemets obliques : interdits...

Deux dangers :

1. Les textes doivent être dans des guillemets doubles obligatoirement
2. Pareil avec les noms des clés

    [
    {
        "prenom": "Læticia",
        "nombreFavori": 4,
        "permis" : true
    }
    ]

Et pour les paranoïaques des guillemets dans le JSON, les booléens (true/false) et les nombres n'ont pas besoin de guillemets en JSON.

PHP

• "Guillemets doubles : textes, sans interprétation
• 'Guillemets simples : textes avec interprétation des variables.
• `Guillemets obliques : pour pour les commandes shell (lien vers la doc) mais pas pour les textes.

    $int_poids = 3.4 ;

    echo "L'objet pèse $int_poids kilogrammes" ; // écrira : L'objet pèse 3.4 kilogrammes
    echo 'L\'objet pèse $int_poids kilogrammes' ; // écrira : L'objet pèse $int_poids kilogrammes

C'est pratique, par contre en français 3.4 devra s'écrire avec une virgule 3,4 et non un point pour le séparateur décimal (oui oui je chipote).

SQL

• "Guillemets doubles : pas utilisés (du moins, pas généralement, mais ça existe !)
• 'Guillemets simples : textes
• `Guillemets obliques : phpMyAdmin les place pour les noms des bases/tables/attribut, ils sont facultatifs

Le gros danger avec SQL, c'est que les textes sont obligatoirement dans des guillemets simples, le contraire du JSON.

---

CSV

• "Guillemets doubles : cellule, facultatifs
• 'Guillemets simples : pas utilisé
• `Guillemets obliques : pas utilisé

On peux écrire avec ou non des guillemets doubles. Le mieux est d'en mettre s'il y a des textes en français.

L'échappement ne se fait pas de manière classique avec l'antislash \", mais en les doublant ""

Problème d'échappement 🚗🚚

Le fait d'intégrer les guillemets obliques ` dans JavaScript est un coup de génie, dommage qu'on ne puisse pas le faire dans plus de langages qu ça car évite efficacement les échappements. Le seul hic est que ces guillemets obliques ne sont pas assez populaires, personnellement j'ai appris leur existence et le faire d'en écrire un au clavier en même temps que j'apprenais le SQL.

Si il n'y aurait q'un seul conseil à donner, méfiez-vous quand vous écrivez du code qui écrit du code, par exemple le JavaScript ou le PHP qui écriront de l'HTML ou du CSS. En effet, il faudra penser à échapper les guillemets qui seront écrit automatiquements.

Contre-exemple

Un contre-exemple avec du PHP qui écrit du HTML qui contient un CSS dans un attribut style :

    foreach (/*pour chaque fichier d image dans un dossier...*/) {
        echo '
Un contre-exemple
' ;
    }

Si le fichier d'image s'apelle toto.jpg :

Un contre-exemple

• Généralement le nom du fichier ne pourra pas casser le PHP car la variable sera interpétée.
  Mais le nom du fichier pourra casser le HTML... ou le CSS qui est contenu dedans...
• Ici, on a des guillemets simples pour le texte qu'écrit le echo, pour éviter d'échapper chaque guillemet double des attributs HTML, pourquoi pas.
• Ensuite il y a le cas des guillemets dans les paramètres de l'URL. Ici, il n'y en aura pas, il ne faut pas condondre les guillemets simples qui sont les guillemets fermants du PHP. Ce choix est-il bon ? Il faudrait espérer qu'il n'ai pas de parenthèse fermante ")" dans le nom du fichier, malheursement ça peux être possible...

Si le fichier d'image s'apelle L'école de Corine (alias "Coco").jpg :

Vous avez deviné, ça va tout casser...

Un contre-exemple

La coloration syntaxique permet de voir que le guillemet ouvrant dans le nom du fichier provoque un amalgame avec un guillemet fermant de l'attribut style du HTML...

Exemple de solution

• Il faut réfléchir à ce qui est potentiellement cassé en fonction de ce qui est dynamique, ici c'est le CSS dans le HTML, mais en général, c'est le HTML.
• Le HTML possède un système d'échappement avec les entités HTML, par exemple ©écrit le signe © (lien vers la liste complète des entités HTML)
  Ce qui nous intéresse est le guillemet double " qui est codé " et le guillemet simple (l'apostrophe) ' qui est codé ' super ! Pas de signes parasites
  
• En PHP pour l'exemple, la fonction htmlentities() le fait automatiquement. Attention cependant, il ne touche pas aux parenthèses.

    foreach (/*pour chaque fichier d image dans un dossier...*/) {
        echo '
Un contre-exemple
' ;
        /* ou */
        echo "
Un contre-exemple
" ;
    }

Un contre-exemple

Solution :

• PHP : Ici, je peux mettre les guillemets PHP simples ou doubles, peu importe, le PHP ne sera jamais cassé car la variale est interprétée.
• HTML : je décide de laisser des guillemets doubles aux attributs, c'est ce qui se fait le plus et c'est recommandé d'écrire normalement
• CSS : je décide de mettre des guillemets simples pour deux raisons :
  1. Je n'aurai pas d'échappement à faire puisque mon css est dans les guillemets doubles de la valeur de l'attribut style du HTML
  2. Puisque htmlentities() ne touche pas aux parenthèses, je me protège de voir aparaitre d'un parenthèse fermante (en général, ce sont les guillemets qui sont souvent échappés dans ce genre de fonction, mais toujours méfiance, consulstez la doc ! Par exemple htmlspecialchars() n'échappe pas les guillemets simples par défaut !)

Le mieux pour ce genre de cas est d'effectuer des crash tests, c'est-à-dire essayer de placer l'alphabet ASCII avec des caractères spéiaux pour tester les textes.

àâæçéèêëîôœùûüÿÀÂÆÇÉÈÊËÎÔŒÙÛÜŸ€¢£¥ƒáÁâÂàÀåÅãÃäÄæÆçÇéÉêÊèÈëËíÍîÎìÌïÏñÑóÓôÔòÒøØõÕöÖœŒšŠßðÐþÞúÚûÛùÙüÜýÝÿŸ°·0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~♥😊

Merci d'avoir lu !
Si en général vous avez une question, une curiosité, n'hésitez pas me contacter.