Comment faire des guillemets en HTML ?

Vous pouvez utiliser les balises <q> et </q> pour mettre des guillemets en HTML autour d'une phrase.

Il existe cependant différents types de guillemets en HTML : les simples, les doubles, les droits, à la française, à l'anglaise...

Si vous devez insérer des guillemets, directement dans votre code HTML, sans avoir à passer par du code CSS, le plus simple pour personnaliser des guillemets en HTML est d'utiliser du code ASCII :

• Guillemets simples à l'anglaise en HTML (‘ ’) = ‘ ’
• Guillemets doubles à l'anglaise en HTML (“ ”) = “ ”
• Guillemets simples à la française en HTML (‹ ›) = ‹ ›
• Guillemets doubles à la française en HTML (« ») = « »
• Guillemets doubles fantaisie en HTML („ “) = „ “

Si vous devez générer des guillemets en code CSS ou bien en JavaScript, vous devez utiliser la propriété CSS quotes. Les guillemets doivent alors être exprimés avec des valeurs numériques.

Vous trouverez la liste de ces valeurs via cette page du site du W3C, ainsi qu'une palette d'exemples sur cette page du W3School.

Exemple de code CSS pour insérer des guillemets :

<style>
q {
    quotes:'\00AB' '\00BB';
}
</style>
<q>un texte entouré de guillemets en CSS</q>

• Guillemets simples à l'anglaise en CSS (‘ ’) = \2018 \2019
• Guillemets doubles à l'anglaise en CSS (“ ”) = \201C \201D
• Guillemets simples à la française en CSS (‹ ›) = \2039 \203A
• Guillemets doubles à la française en CSS (« ») = \00AB \00BB
• Guillemets doubles fantaisie en CSS („ “) = \201E \201D

Exemple de code Javascript à utiliser pour générer des guillemets :

<q id="test">un texte entouré de guillemets en JavaScript</q>
<script>
document.getElementById("test").style.quotes = "'\u00AB' '\u00BB'";
</script>

• Guillemets simples à l'anglaise en JavaScript (‘ ’) = \u2018 \u2019
• Guillemets doubles à l'anglaise en JavaScript (“ ”) = \u201C \u201D
• Guillemets simples à la française en JavaScript (‹ ›) = \u2039 \u203A
• Guillemets doubles à la française en JavaScript (« ») = \u00AB \u00BB
• Guillemets doubles fantaisie en JavaScript („ “) = \u201E \u201D