DEV Community

loading...
Cover image for The cite HTML Tag

The cite HTML Tag

braydoncoyer profile image Braydon Coyer Originally published at braydoncoyer.dev Updated on ・2 min read

Welcome to part three of the Uncommon HTML Tag series!

With each article in this series, I will introduce a widely unknown HTML tag, discuss compatibility across browsers and cover some real-world use cases with the element.

The < cite > Tag

The <cite></cite> tag is a semantic element that is used in conjunction with the <blockquote></blockquote> element to denote a referenced piece of work, such as a book, an essay, a film, a musical or even a tweet.

Many browsers style the content of a <cite></cite> element in italics by default.

Let's take a look at how it's used!

<blockquote>
    When Mr. Bilbo Baggins of Bag End announced that he would
    shortly be celebrating his eleventy-first birthday with a party
    of special magnificence, there was much talk and excitement in Hobbiton.

    <p>First paragraph in 
    <cite>The Lord of the Rings: The Fellowship of the Ring</cite>
    by J. R. R. Tolkien (Chapter 1: A Long-Expected Party).</p>
</blockquote>
Enter fullscreen mode Exit fullscreen mode

Screen Shot 2021-01-08 at 4.10.52 PM.png

Both the opening and closing tags are mandatory and, unlike some of the other HTML tags we've discussed, does not contain any unique attributes (global attributes can be used).

Please note that, according to the MDN Web Docs,

...the W3C specification says that a reference to a creative work, as included within a element, may include the name of the work’s author. However, the WHATWG specification for says the opposite: that a person’s name must never be included, under any circumstances.

If you want to play around with the <cite></cite> tag, feel free to fork the pen below!

Compatibility

The <cite></cite> tag is part of the HTML Living Standard and is supported on all major web browsers!

Screen Shot 2021-01-08 at 4.13.28 PM.png

Conclusion

Thanks for reading! Have you ever used the <cite></cite> tag in a project? Let me know in the comments below!

If you liked this article and want more content like this, read some of my other articles, subscribe to my newsletter and make sure to follow me on Twitter!

Discussion (1)

pic
Editor guide
Collapse
jayjeckel profile image
Jay Jeckel

Whether or not you include an author name in citations should be determined by the content creator's style guide, not the specification of an html element. The specification trying to make this decision is as silly as the idea that the p tag specification would weigh in on how many sentences make up a paragraph. It sounds like WHATWG needs to learn how to stay in their own lane.