Inline quote in HTML

It's amazing when you work for many many years with a technology and stumble upon something new. I stumbled upon an HTML tag that I had never used before, the Q tag.

With the Q tag, you can quote some text inside a paragraph without breaking the line. The browser is supposed to render that text in quotes, so you don't have to add them yourself.

Let's see it in action:

<p>Quoting with the Q tag is <q>sweet</q>.</p>

The above HTML snippet will render like this:

Quoting with the Q tag is sweet.

 

And with CSS you can style just the Q tag, making for example all of your quoted text also bold or italics. Of course you could do the same thing by misusing some span or em tag, possibly with a separate CSS class name, but I think this approach is cleaner and more semantic friendly.

Hope this helps.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s