Correct Quotation Marks and Apostrophes in HTML

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.

A well-made font has the curly characters too, but not all will be curly; it depends on the design of the styling.

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.

“ - &ldquo;
” - &rdquo;
‘ - &lsquo;
’ - &rsquo;
„ - &bdquo;
‚ - &sbquo;

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.

For more sophisticated use cases – like more levels – please visit and read the HTML5 Doctor’s article!
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.