Step 1: The <cite> tag is a specific semantic element in HTML used to define the title of a creative work. This could be a book, a movie, a song, a painting, or even a research paper.

Step 2: Let's reference a famous book. We use the <p> tag for context, and wrap the book's title in <cite>. Notice how specific we are about what constitutes the 'title'.

<p>My favorite book is <cite>The Hobbit</cite>.</p>

Step 3: By default, browsers render the content inside <cite> in italics. This helps the reader distinguish the title from the rest of the text, but the semantic meaning is what matters most to machines.

<p>My favorite book is <cite>The Hobbit</cite>.</p>

Step 4: Checkpoint: What should go inside the <cite> tag?

<p>I saw the movie <cite>Inception</cite> directed by Nolan.</p>

Step 5: A common mistake is using <cite> for the author's name. This is incorrect. <cite> is for the Work. For the author, simply use text or <address> if it's contact info.


<p>Written by <cite>J.K. Rowling</cite></p>


<p>Written by J.K. Rowling</p>

Step 6: You will often see <cite> used with <blockquote>. The blockquote contains the quote, and the cite tag (usually inside a footer or outside the blockquote) references the source.

<blockquote>
  <p>To be, or not to be...</p>
  <footer>- <cite>Hamlet</cite></footer>
</blockquote>

Step 7: Here is how a blockquote with a citation renders. The citation is visually distinct, providing clear attribution to the source work.

<blockquote>
  <p>To be, or not to be...</p>
  <footer>- <cite>Hamlet</cite></footer>
</blockquote>

Step 8: Excellent! You now know how to properly attribute creative works using the <cite> tag. Remember: Cite the Title, not the Person.

<h1>References</h1>
<p>Source: <cite>HTML Spec</cite></p>

Step 9: Practice makes perfect. Use the editor below to cite your favorite movie or book and unlock the Reference Pro achievement!

cite.html

1 / 9

📖

Tutor:The <cite> tag is a specific semantic element in HTML used to define the title of a creative work. This could be a book, a movie, a song, a painting, or even a research paper.

⭐ 0 EXP

Tag Mastery

Unlock nodes by learning new concepts about citations.

Concept 1: Syntax

The <cite> tag is a paired tag. It must contain text, specifically the title of a work.

System Check

Which element is used to mark up the title of a work?

Community Reference Library

Share Your Sources

Found a unique way to style citations or a complex bibliography structure? Share your snippet.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Cite Tag and References

Pascual Vila

Frontend Instructor.

The HTML <cite> element is used to describe a reference to a creative work. It must include the title of that work.

What qualifies as a work?

A work can be a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theater production, a play, an opera, a musical, an exhibition, a legal case report, etc.

Common Mistakes

A person's name is not the title of a work. Consequently, the <cite> element must not be used to mark up the author of a work, unless the author's name is actually part of the title (e.g., "The autobiography of X").

Visual Presentation

Browsers typically render the content of a <cite> element in italics. However, you can change this style using CSS if needed. The important part is the semantic meaning conveyed to assistive technologies.

Citation Glossary

<cite>: Defines the title of a creative work (e.g., a book, a song, a movie).
<blockquote>: Defines a section that is quoted from another source. Often used in conjunction with <cite>.
Creative Work: The entity being referenced, such as "Harry Potter" (the book), not "J.K. Rowling" (the author).

📖 INDEX