Q (idea)

<q> is an HTML tag used for semantic markup to denote a short quotation within a document. Unlike the block element <blockquote> which is used to denote long passages or quotations within a document, the q tag is an inline element used to include a quotation within another element such as a paragraph.

See also: blockquote, cite, kbd, samp, &quot;

The q tag is infrequently used for two reasons:

1. It is much easier to type out your quotation marks rather than wrapping tags around your quoted text.
2. Most web browsers provide only partial support (or no support) for the tag.

Reason #1 is hard to argue with. If something is easy, that is how most people will do it. However, there are reasons why you should take the time to use the q tag. First, the double quotation mark (") is not valid to use within an HTML document except when enclosing an HTML attribute. Instead of typing the quotation mark, you should instead use the quote character reference: &quot; (see also HTML Symbol Reference). In addition, use of the q element makes it easier for screen readers and other accessibility clients to do their job. When the screen reader sees the q tag, it is able to tell the user that the section of text is a quote whereas quotation marks can be used for various other things in your document (foot mark, inch mark, citation, etc).

Reason #2 will be discussed under the "Usage" heading below.

Attributes

The q tag does not have any required HTML attributes, however all of the following are valid (valid E2 attributes for this tag are italicized):

• cite (type: URI) - this attribute allows you to specify the URL of the document where the quote is taken from
• HTML Core Attributes
  • class (type: CDATA) - space separated list of classes
  • id (type: ID) - document-wide unique id
  • style (type: Style Sheet) - associated style information
  • title (type: Text) - advisory title/amplification; this information is usually displayed through tooltips
     
• HTML International Attributes (I18N)
  • dir (type: Custom) - specifies the direction of weak or neutral text; valid values include ltr (left to right) or rtl (right to left)
  • lang (type: Custom) - specifies the Language Code of the language used in the text
     
• HTML Event Attributes
  • onclick (type: Script) - a pointer button was clicked
  • ondblclick (type: Script) - a pointer button was double clicked
  • onkeydown (type: Script) - a key was pressed down
  • onkeypress (type: Script) - a key was pressed and released
  • onkeyup (type: Script) - a key was released
  • onmousedown (type: Script) - a pointer button was pressed down
  • onmousemove (type: Script) - a pointer was moved within
  • onmouseout (type: Script) - a pointer was moved away
  • onmouseover (type: Script) - a pointer was moved onto
  • onmouseup (type: Script) - a pointer button was released

Usage

To use the tag, simply place an opening (<q>) and closing (</q>) tag around the text to be quoted. These tags can be nested. For example:

<p>The witness said, <q>I clearly heard the man yell, <q>I'll kill you!</q> before slamming the door.</q></p>

As seen in the example, there is a quote inside a quote. Using (American) English punctuation, this should be rendered as follows:

The witness said, "I clearly heard the man yell, 'I'll kill you!' before slamming the door."

Notice the single quotation marks (') used inside of the double quotation marks ("). However, as stated above, most browsers do not support the q tag, and even fewer still support nested q tags. Below is how your browser renders the example:

The witness said, I clearly heard the man yell, I'll kill you! before slamming the door.

If your browser displayed both examples the same (and you use an English-based browser), count yourself in the lucky minority. People in other countries should see their proper punctuation based on their software settings. Some of these include¹:

• “English”
• „German”
• ”Swedish”
• «French»
• »Slovenian«
• »Swedish Books»

E2 Support?

E2 does provide limited support for the this tag. It does not allow the use of any of its HTML attributes with the exception of the cite attribute. Even though E2 does allow its use on the site, keep in mind that most browsers still do not support it. If you would like to use this tag with any of its other attributes, you can do so in your Notelet Nodelet.

Common Browser Implementations

Below is how various browsers display the example from above. Feel free to /msg me with any other examples.

• Amaya 8.5; Lynx:
  The witness said, "I clearly heard the man yell, 'I'll kill you!' before slamming the door." (perfect)

• Camino 0.8 (Mac); Mozilla 1.6 (Windows); Mozilla Firefox 1 (Windows); Netscape 7 (Windows); Opera 7 (Windows); Safari 1.2 (Mac):
  The witness said, "I clearly heard the man yell, "I'll kill you!" before slamming the door." (incorrectly places double quotes around both quotes)

• w3m 0.2:
  The witness said, 'I clearly heard the man yell, 'I'll kill you!' before slamming the door.' (incorrectly places single quotes around both quotes)

• Links2 2.1:
  The witness said, I clearly heard the man yell, I'll kill you! before slamming the door. (converts quoted text to bold)

• Elinks 0.9; Internet Explorer 6 (Windows):
  The witness said, I clearly heard the man yell, I'll kill you! before slamming the door. (no visual changes)

Previous HTML Tag: pre
Next HTML Tag: s
See Also: HTML tags and HTML attributes

¹ Thanks to avjewe's great writeup in quotation marks.

Also thanks to Wntrmute, Albert Herring, generic-man, and Calast for submitting various browser implementations.