<q>: The Inline Quotation element #
::: section-content
The <q>
HTML element indicates that the enclosed text is a
short inline quotation. Most modern browsers implement this by
surrounding the text in quotation marks. This element is intended for
short quotations that don't require paragraph breaks; for long
quotations use the
<blockquote>
element.
:::
Try it #
::: section-content ::: iframe ::: {.output-header .border-rounded-top}
HTML Demo: <q> #
Reset :::
::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::
::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::
::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML
CSS
JavaScript :::
::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}
When Dave asks HAL to open the pod bay door, HAL answers:
I’m sorry, Dave. I’m afraid I can’t do that.
::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} q { font-style: italic; } ::: :::
::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::
::: {#output .output-container}
Output #
::: :::
::: {.section .console-container .hidden aria-hidden=“true”}
Console Output #
![] clear console
::: {#console .console} ::: :::
::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::
Attributes #
::: section-content This element includes the global attributes.
cite
The value of this attribute is a URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote. :::
Examples #
::: section-content ::: code-example [html]{.language-name}
<p>
According to Mozilla's website,
<q cite="https://www.mozilla.org/en-US/about/history/details/">
Firefox 1.0 was released in 2004 and became a big success.
</q>
</p>
::: :::
Result #
::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::
Technical summary #
::: section-content
Content categories | Flow content, phrasing content, palpable content. |
---|---|
Permitted content | Phrasing content. |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts phrasing content. |
Implicit ARIA role | generic |
Permitted ARIA roles | Any |
DOM interface | HTMLQuoteElement |
Specifications #
::: _table #
Specification #
HTML Standard
[#
the-q-element]{.small}
:::
Browser compatibility #
::: _table Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
q
1 12 1 Yes 15 3 4.4 18 4 14 2 1.0
:::
See also #
::: section-content
- The
<blockquote>
element for long quotations. - The
<cite>
element for source citations. :::
::: _attribution
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5
or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q{._attribution-link}
:::