<q>
A short quote woven into a sentence. The browser adds the quotation marks itself.
- Display
- inline
- Closing tag
- Required
- Permitted content
- Phrasing content
Example
#<p>Our mentor used to tell us: <q>Don't copy code you don't understand</q>. Today I know he was right.</p>Definition and usage
#The <q> element marks a short quote in the middle of a sentence. The browser surrounds it with quotation marks on its own, so don’t type them in by hand, or you’ll see them twice.
Browsers usually pick quotation marks to match the page’s language, so with lang="en" you’ll see "…". You can set a different style with the CSS quotes property. You can give the quote’s source address in the cite attribute, though the browser doesn’t display it.
Mark a longer quote that takes up a separate block with <blockquote>. Also don’t use <q> for irony or to highlight single words in quotation marks, since that’s not what a quote is.
Syntax
#<q>short quote</q>Attributes
#URL
The address of the document the quote comes from. It isn’t displayed; it’s for scripts and crawlers. Give the visible source in the sentence itself.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#cite
URLThe address of the document the quote comes from. It isn’t displayed; it’s for scripts and crawlers. Give the visible source in the sentence itself.
<p>
The CodeWorlds docs remind us:
<q cite="https://www.codeworlds.com/docs/html/p">a paragraph can only contain phrasing content</q>.
</p>More examples
#<p style="quotes: '«' '»';">
The instructions say: <q>save the file as index.html</q>, then refresh the page.
</p>You’ll see «…» marks like these in many European books. The quotes property takes pairs of characters: an opening one and a closing one.
Default CSS
#Most browsers display this element with these default styles:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Don’t add your own quotation marks around
<q>; the browser does it for you. - Put long quotes in
<blockquote>. - Usually,
lang="en"on the<html>element is enough for the browser to use English-style quotation marks. You set custom characters in CSS, e.g.q { quotes: "«" "»"; }.
Related entries
#- <blockquote>A longer quotation from another source, displayed as a separate, indented block.
- <cite>The title of a work: a book, an article, a movie, a song, a game, or a piece of software.
- <em>Stress in a sentence: a word that, read aloud, is pronounced with emphasis.
- <i>Text in a different tone or voice: foreign expressions, Latin names, a character’s thoughts, technical terms.
Spotted a mistake or missing an example? Write to us.