Definition and Usage

The <q> tag represents some short phrase quoted from another source.

It is used for short inline quotations, and most browsers automatically add quotation marks before and after the text to show that it's a quote.

HTML 
<p>He said, <q>The book is a storehouse of knowledge.</q></p>
Rendered Output

According to the HTML specification, the <q> tag should be used as follows:

  • When using the <q> tag, quotation marks or similar punctuation should not be placed directly inside, outside, or around the <q> element. Such punctuation is automatically handled by the browser during rendering. However, using the <q> tag to mark quotations is entirely optional. It is also valid to use explicit quotation marks without the <q> tag. Both approaches are considered correct in HTML.
  • The content inside the <q> tag must be a direct quotation from another source. If a source exists, it can be indicated using the cite attribute. The source may be fictional, such as a novel or script.

Use the <blockquote> tag when representing a quotation that is not inline but instead appears as a separate, standalone section.

<q> Tag Usage and Quotation Marks

Using the <q> tag to mark quotations is entirely optional.
It is also valid to use explicit quotation marks without the <q> tag. Both methods are considered correct in HTML.

HTML Example of a Quotation Using the <q> Tag 
<p>
    Albert Einstein said, <q>The only source of knowledge is experience.</q>
</p>
Rendered Output
HTML Example of a Quotation Using Explicit Quotation Marks 
<p>
    Albert Einstein said, "The only source of knowledge is experience."
</p>
Rendered Output

Both examples represent the quotation "The only source of knowledge is experience." The first uses the <q> tag to indicate the quote, while the second uses explicit quotation marks. Both methods are considered valid according to the HTML specification.

Using the <q> Tag's cite Attribute

The cite attribute specifies the URL of the original document or message from which the quoted information is taken.

The cite attribute is not mandatory on the <q> tag. If the quotation itself is sufficiently clear, you may omit the cite attribute. However, using the cite attribute explicitly provides the source of the quotation, which can enhance the credibility of the information. Authors, search engines, and web developers can use this information.

HTML 
<p>
    Here is a famous quote:
    <q cite="https://www.brainyquote.com/quotes/albert_einstein_100134">
        Imagination is more important than knowledge.
    </q>
</p>
Rendered Output

As shown in the example above, the cite attribute does not apply any special styling in browsers. It is not displayed on the page but can be viewed in the page source or developer tools. Users do not see the value of the cite attribute when viewing the page.

However, authors, developers, and search engines can utilize this information. For instance, search engines may collect source information from the cite attribute to display it in search results. Additionally, developers or site administrators can use it to track content and manage the sources of quoted information.

Differences Between the <q> and <cite> Tags

Both the <q> and <cite> tags are used to express quotations, but their purposes and meanings are entirely different.

The <q> tag is used to represent a short piece of quoted text from another source, while the <cite> tag represents the title of a cited work or the work itself.

The <cite> Tag

The <cite> tag represents the title or source of a cited work. It is primarily used to emphasize or identify the name or title of a document or creative work. The main purpose of the <cite> tag is to indicate the source of a citation, and it is usually rendered in italics.

HTML 
<p>The title of the cited work is <cite>codingCourses</cite>.</p>
Rendered Output

Browser compatibility

Browser compatibility for the q tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<q> 1 12 1 3

Specifications

Specification for the q tag
Specification
<q> HTML Standard
#the-q-element

References

See also