The <cite> & <q> elements
The <cite> tag marks the title of a creative work, such as a book, film, song, article or game, and browsers show it in italics. The <q> tag marks a short quotation inside a sentence, and browsers add quotation marks around it automatically. For longer quotes that stand on their own, use <blockquote>.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, palpable content |
| Content model | Phrasing content |
| Tag omission | Neither the start nor the end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLElement (<cite>), HTMLQuoteElement (<q>) |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
<q>
| Attribute | Description |
|---|---|
| cite | A URL pointing to the source of the quotation. It is not displayed; it’s metadata for machines. |
<cite>
| Attribute | Description |
|---|---|
| — | Only the global attributes apply. |
Common examples
Titles of creative works
<cite> marks the title of a book, film, song, article or website.
A short quote inside a sentence
<q> adds the quotation marks for you.
A quote with its source
The cite attribute on q stores the source URL; the <cite> element shows the title.
Quotes in other languages
Set lang and the browser uses the right quotation marks for that language.
<q> vs typing quotation marks
You can just type quotation marks around a quote, and that’s perfectly valid. <q> adds two things: it marks the text as a quotation for software, and the browser draws the right quotation marks for the page’s language, including nested quotes.
Use q when you want consistent, language-aware quote marks or want to record the source with cite. Never do both — typed marks plus <q> gives you double quotation marks.
| <q> | Typed “marks” | |
|---|---|---|
| Quote marks | Added automatically | You type them |
| Language-aware | Yes | No |
| Source URL | cite attribute | None |
Common mistakes to avoid
- Putting a person’s name in cite. The element is for titles of works; author names can stay as plain text.
- Typing quote marks inside q. The browser already adds them, so you end up with two pairs.
- Using q for long quotations. Quotes that take up a paragraph belong in <blockquote>.
- Using cite just for italics. Style with CSS if it isn’t a title.
Accessibility & SEO tips
- Credit sources with the title and a link — it builds trust with readers and shows search engines your content is well researched.
- Set the
langattribute on your page so q uses the right quotation marks automatically. - Screen readers usually don’t announce q, but they do read the quotation marks the browser adds in most cases.
- Mark up titles of works consistently across your site with cite, so readers learn to recognise titles at a glance.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.