The HTML Q Tag
There are numerous one-character HTML tags. There's the a tag for linking. There are the b, i, s, and u tags that affect the appearance of characters.
And then there's the q tag.
The q tag puts quote marks around the text being quoted. Like:
Text being quoted.
The quote at each end of the above example text is the basic function of the q tag. But there is so much more possible.
The real reason I like the q tag so much is the ease of using it for a consistent quote style across an entire website.
Simply maintain a style for the q tag in the site-wide CSS file. (If you change your mind about the style, updating the one CSS file changes the style across your entire site.)
Text being quoted.
With the CSS style in place, use the q tag wherever you want to attract attention to a quote. On the right is an example. The quote is bordered and the box is floated to the right edge of the article. Implementation code is below.
<style type="text/css">
q { float:right; margin-left:1em; width:200px; border:1px solid #999; padding:1em; }
</style>
<q>Text being quoted.</q>
Text being quoted.
As mentioned, a change in your site-wide CSS file can change all q text. Perhaps you want to round the corners of the box and make the text purple. Adding color:hsl(300,80%,28%); and also border-radius:1em; to the CSS declaration does the trick.
This is about as easy as it gets. Create a style then use the HTML q tag to apply the style.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
