I bet you never knew that HTML had a built-in method to display inline quotations – and there’s probably a good reason for that – until now. Over 9 years ago when HTML 4.0 was first released the world was introduced to the <q> tag – intended to display inline quotations that don’t require paragraph tags. By default all browsers would automatically attach quotation marks surrounding your inline quote, all except one browser. Microsoft’s Internet Explorer. For some reason Internet Explorer never properly supported the <q> tag – and as such the world kind of forgot about it.
However we must forget no more! Microsoft’s new Edge browser has no issues with the <q> tag – which means that currently ALL browsers support it! But – why would you want to start using it when you can just as easily manually add quotation marks around your inline quotes? Well if you wanted to add a style to all the inline quotes on your website you would have to surround all these quotes with a custom class so you can style them via CSS. For example:
The quick brown fox jumps over the lazy dog is an English-language pangram.
With the <q> tag you can simply style all <q> elements at once via CSS. Plus using the <q> tag is extremely easy.
For example, let’s take the following sentence:
The quick brown fox jumps over the lazy dog
is an English-language pangram.
The above sentence features an inline quotation, however as you can see in the code below no quotation marks are actually used. Simply the <q> tag.
The quick brown fox jumps over the lazy dogis an English-language pangram.
For a long time this simple functionality wasn’t available to those of us who cared about how our websites looked on Internet Explorer. Luckily this limitation no longer exists – so I guess we all owe Microsoft a thank you here.
Now, we are free to use the following CSS selectors to style all inline quotes: q, q:before, q:after.