Home > Tutorials > HTML/CSS/JS Tutorials > Easily Style Inline Quotations Using The Forgotten <Q> Tag

Easily Style Inline Quotations Using The Forgotten <Q> Tag

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:

<p><span class="inlineQuote">The quick brown fox jumps over the lazy dog</span> is an English-language pangram.</p>

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.

<p><q>The quick brown fox jumps over the lazy dog</q> is an English-language pangram.</p>

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.

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

How To Populate A DIV via an HTML SelectBox, PDO, and jQuery

Imagine you have a database full of information, and you want to let users browse ...

Like every other website, this site uses cookies to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.

Close