Unfortunately, we use wrong quotation marks and apostrophes on the web most of the times.
Not using the correct characters is an easy mistake to make which is present usually because we are lazy. You can be sure that the Washington Post online won’t make this error so why we always do? Mostly because on our keyboard only the straight quotes are available easily.
Initially, we use straight quotes for measurement – or when we code – and the curly ones for quotations.
Using the <q> Tag
To use the correct smart quotes we only need to get the utf-8 characters or use the HTML entity. We can insert these manually into our editor, or we can use the <q> HTML tag which purpose is to make correct inline quotes.
“ - “ ” - ” ‘ - ‘ ’ - ’ „ - „ ‚ - ‚
The quotations HTML tag will insert the correct quotation marks around the wrapped text. Note that the position of the quotes – top or down – depends on the language.
The good thing is that we can change/style the open and close characters too with ::before, ::after pseudo-element and set the defaults with the quotes property. We also have unique keyword values to refer to the predefined open and close characters. For a simple example, please check out the following pen:
See the Pen
Quote demo by Adam Laki (@adamlaki)
on CodePen.
q { quotes: "“" "”"; } q:lang(hu) { quotes: "„" "“"; }
Using the lang attribute we can set different values to different languages. Just add your preferred lang code the <q> element and style it as you wish.