Live Preview
A book title marked with <cite> (browser default italic):
My favorite novel is 1984 by George Orwell.
HTML <cite> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll mark creative work titles and build proper citation markup with semantic HTML.
Cite Syntax
Wrap book, film, and song titles in <cite>.
Semantic Meaning
Signal creative work references to browsers and assistive tech.
Element vs Attribute
Distinguish visible <cite> from the cite URL attribute.
blockquote Pairing
Add attribution with footer + cite inside quotes.
Bibliography Lists
Build works-cited lists with cited titles.
CSS Styling
Override default italic styling when your design requires it.
Fundamentals
What Is the <cite> Tag?
The cite element (<cite>) represents the title of a creative work or a reference to its creator. Browsers typically render it in italics by default.
Not for quoted speech
<cite> is for work titles and attribution—not for wrapping the quoted words themselves. Put quote text in blockquote or q.
Common uses include book and film titles in sentences, bibliography lists, and visible attribution inside <blockquote> footers.
Foundation
📝 Syntax
Wrap the title of the creative work between opening and closing <cite> tags:
syntax.html
<p>I enjoyed reading <cite>Pride and Prejudice</cite>.</p>Syntax Rules
<cite>is an inline element—it nests inside paragraphs and list items.- Use it for creative work titles: books, films, songs, plays, paintings, papers.
- Do not wrap quoted speech or random emphasized text in
cite. - Self-closing syntax (
<cite />) is not valid in HTML.
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Result |
|---|---|---|
| Book title | <cite>1984</cite> | Italic work title |
| In a sentence | I read <cite>Dune</cite> | Semantic inline reference |
| Quote attribution | <footer>— <cite>Author</cite> | Visible source in blockquote |
| Source URL | <blockquote cite="url"> | Hidden attribute, not element |
| Bibliography | <li><cite>Title</cite> by Author | Works-cited list item |
| Tag-specific attrs | None | Global attributes only |
Comparison
⚖️ <cite> Element vs cite Attribute
These share a name but serve different purposes in HTML:
| Feature | <cite> element | cite attribute |
|---|---|---|
| Visibility | Shown on the page | Hidden metadata (URL) |
| Content | Work title or author name | Source URL on blockquote or q |
| Quote text | Not for quoted passage | Does not hold quote text |
| Best practice | Visible footer attribution | URL in attribute + visible cite element |
Reference
🧰 Attributes
The <cite> tag has no tag-specific attributes. Global attributes apply:
class GlobalCSS hook for custom typography beyond default italic styling.
class="work-title"id GlobalUnique identifier for linking or scripting the cite element.
id="book-ref-1"lang GlobalDeclare the language of a foreign-language work title.
lang="fr"title GlobalExtra tooltip text for abbreviated or translated titles.
title="Full publication name"Element type InlinePhrasing content that flows inside paragraphs and lists.
<cite>Title</cite>Default style BrowserUser-agent stylesheet applies italic font-style by default.
font-style: italic;Style presentation with CSS classes rather than presentational HTML like <i> alone.
Hands-On
Examples Gallery
Creative work titles, blockquote attribution, and bibliography patterns with copy-ready code and live previews.
Basic Creative Work Title
Mark a book title inside a sentence. This is the most common beginner use of <cite>.
basic-cite.html
<p>
I recently finished reading
<cite>To Kill a Mockingbird</cite>
by Harper Lee.
</p>📚 Common Use Cases
Use <cite> when naming books, films, songs, plays, paintings, research papers, or when showing attribution inside a <blockquote> footer.
Attribution in blockquote Footer
Put the quoted text in <blockquote>. Add a <footer> with <cite> for visible attribution. The cite attribute can hold the source URL.
blockquote-cite.html
<blockquote cite="https://en.wikiquote.org/wiki/Albert_Einstein">
<p>Imagination is more important than knowledge.</p>
<footer>— <cite>Albert Einstein</cite></footer>
</blockquote>References and Bibliography
Build a works-cited list where each creative work title is wrapped in <cite>.
references.html
<h2>References</h2>
<ul>
<li><cite>The Great Gatsby</cite> by F. Scott Fitzgerald</li>
<li><cite>Inception</cite> directed by Christopher Nolan</li>
<li><cite>Bohemian Rhapsody</cite> by Queen</li>
</ul>Styled cite with CSS
Override or extend the default italic look using a CSS class on <cite>.
styled-cite.html
<style>
.work-title {
font-style: italic;
color: #7c2d12;
font-weight: 600;
}
</style>
<p>My favorite film is <cite class="work-title">Spirited Away</cite>.</p>Design
Styling <cite> with CSS
Browsers italicize cite by default. Customize typography with CSS classes:
font-style Default italiccolor Brand accentfont-weight Emphasize titlesfont-style: normal Override italic cite-styles.css
/* Custom work title styling */
cite {
font-style: italic;
}
.work-title {
font-style: italic;
color: #7c2d12;
font-weight: 600;
}
blockquote footer cite {
font-style: normal;
font-weight: 600;
}Live styled work title
Recommended reading: The Hobbit by J.R.R. Tolkien.
A11y
♿ Accessibility
Semantic citations help all readers understand your content:
- Use cite for work titles — screen readers can identify referenced creative works.
- Do not misuse cite for quotes — quoted speech belongs in
blockquoteorq. - Pair with footer attribution — visible source names help sighted and assistive-tech users.
- Keep styling readable — italic text can be harder to read at small sizes; adjust with CSS if needed.
🧠 How <cite> Works
1
Author marks a work title
Wrap the book, film, or song name in cite.
Markup
2
Browser applies default italic
User-agent styles visually distinguish the referenced work.
Rendering
3
Assistive tech reads semantics
The element type signals a citation or creative work reference.
Accessibility
=
Clear, semantic references
Readers understand which creative works you are naming or citing.
Compatibility
Universal Browser Support
The <cite> element is supported in all browsers, including Internet Explorer.
Baseline · Since HTML 4
Semantic citations that work everywhere
From legacy Internet Explorer to the latest mobile browsers — the cite element is one of the most universally supported semantic text elements.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support<cite> tag 100% supported
Bottom line: Ship semantic citations with confidence. The <cite> element is safe to use in every production environment today.
Wrap Up
Conclusion
The <cite> tag gives your HTML clear meaning: it names creative works and supports proper attribution. Use it for book, film, and song titles—not for quoted speech—and pair it with <blockquote> when showing longer quotations with visible sources.
Remember the difference between the cite element and the cite attribute, and style titles with CSS for a consistent design system.
Pro Tips
💡 Best Practices
✅ Do
- Use
citefor creative work titles - Add
footer+citeinsideblockquote - Build bibliography lists with
citearound titles - Style with CSS classes for consistent design
❌ Don’t
- Wrap quoted speech in
<cite> - Confuse
citeelement withciteattribute - Use
citeonly for visual italics - Skip attribution when quoting other sources
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <cite>
Bookmark these before you ship — they’ll keep your citations semantic and accessible.
6
Core concepts 01
Creative Work Titles
<cite> marks books, films, songs, and other creative works.
02
Valid HTML5
A semantic element supported in every modern browser.
Essential 03
Not for Quotes
Quoted speech belongs in blockquote or q, not cite.
04
Element vs Attribute
The cite element is visible; the cite attribute holds a source URL.
Distinction 05
Default Italic
Browsers italicize cite by default; override with CSS as needed.
Styling 06
blockquote Pairing
Use footer + cite inside blockquote for visible attribution.
Pattern❓ Frequently Asked Questions
It marks the title of a creative work such as a book, film, song, or research paper.
The
cite element is visible markup for a title or author. The cite attribute on blockquote or q holds a source URL and is not shown on the page.No. Put quote text in
blockquote or q. Use cite for the work title or attribution in a footer.Yes, browsers apply italic styling by default. You can change this with CSS.
Use
blockquote for the quote, optional cite attribute for the URL, and a footer with cite for visible attribution.Practice Semantic Citations
Mark creative work titles and build proper blockquote attribution in the Try It editor.
About the author
6 people found this page helpful