HTML <q> Tag for Short Quotes

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <q> Tag in HTML 5

Use the <q> tag for inline quoted text

The <q> tag should be used for text within a paragraph that is a quotation from another source or to set off a literal phrase from the normal flow of a paragraph. The content inside the q element, which is one of the phrase elements in HTML, will normally be displayed within a pair of double quotation marks.

This paragraph follows the practice what you preach principle. The double quotation marks around the quotation in the previous sentence are created by the browser interpreting the <q> tag rather than by actual double quotation marks in the HTML code.

See the <q> tag example code below.

The value of the cite attribute is a URL or other URI reference and is not displayed in most browsers. The <cite> tag can be used to cite the title of the source of the quotation.

<q> Quote Tag Syntax

Rules for coding HTML `q` elements

<body>
   ...
   ... phrasing content expected ...
   <q cite="URL-of-source">... phrasing content ...</q>
   ...
</body>

Rules for coding HTML `q` elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the q element for an inline quotation where phrasing content is expected.
Begin the q element with a starting <q> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
If the source of the quotation is available online, include the optional cite attribute with the URL of the source of the quotation.
Include any HTML global attributes on the <q> tag as appropriate.
Inside the q element, between the starting <q> tag and the ending </q> tag, code the inner HTML phrasing content with the text of the quotation. Do not include any quotation marks, either inside the q element or outside it.
End the q element with a matching </q> closing tag.

Content Model

Content of the q element

The content of the q element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<q> Tag Attributes

Attributes of the <q> tag

global attributes In addition to the personal attributes of the <q> tag below, any of the common HTML attributes can also be coded.

cite

a URI reference (or IRI reference depending on the encoding) that resolves to a URI for the resource containing the source of the quotation

Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference.

If the value of the cite attribute is an HTTP URI, it may contain any of the following components:

protocol scheme, typically http: or else https:
username, followed by an "@"
host name or IP address
port number, which defaults to 80 for the http scheme and 443 for the https scheme
absolute or relative path
search query, indicated by "?"
fragment identifier, indicated by "#"

If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash /..., it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the document.

<q> Quote Tag Examples

Examples of the `q` tag in HTML 5

Examples of the <q> tag

(see <q> tag demo above)

<p>This paragraph follows the <q>practice what you preach</q> principle. The double quotation
marks around the quotation in the previous sentence are created by the browser interpreting
the &lt;q&gt; tag rather than by actual double quotation marks in the HTML code.</p>

The < and > character entities on the last line escapes that instance of the <q> tag so that it appears literally in that sentence rather than as the HTML code for a start tag with no matching end tag.

The cite attribute provides a link to the source of the quotation. The HTML 5 specification says that User agents should allow users to follow such citation links using the URL in the cite attribute. At this point, however, none of the browsers actually do..

<q> with <cite> tag for quote citation

<p>Per <a href="http://www.HTML-5.com/css/css-styles/#html-color-picker">
   <cite>HTML Color Picker</cite></a>,
   <q cite="http://www.HTML-5.com/css/css-styles/#html-color-picker">In a browser
   that does not yet support the HTML <input type="range"/> for a slider bar control,
   [HTML slider bar] controls will appear as text input fields.</q></p>

Note that the content of the cite element is the title of the source of the quotation, while the value of the <q cite> attribute is a URL or other URI reference. In this case, an <a href> tag is used to create a link to the source of the quotation. The same URL is used in the <a href> attribute, the target of the link which will be visible, and the <q cite> attribute, which will not be displayed.

Changes in HTML 5 - <q> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the q element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5