Learn HTML

HTML: cite tag

March 19, 2023
12 Min Read

HTML: <cite> tag

In this series of learning HTML, we will teach you how to use the HTML cite tag with proper syntax and lots of examples. Let’s start on the HTML cite tag.

 

Description of HTML cite tag

The HTML <cite> tag is used to indicate a citation or reference to a source of information in an HTML document. It is typically used to attribute a quote or a piece of information to its original source.

Here is an example of how the <cite> tag can be used:

<p>According to <cite>The New York Times</cite>, the unemployment rate has decreased by 2%.</p>

In this example, the <cite> tag is used to attribute the information in the sentence to its original source, which is The New York Times.

When the code is rendered in a web browser, it will appear like this:

According to The New York Times, the unemployment rate has decreased by 2%.

The <cite> tag can also be used to indicate the title of a work, such as a book, article, or website. In this case, it is used to indicate the title of the work being referenced rather than the source of information.

Here is an example of how the <cite> tag can be used in this way:

<p>I just finished reading <cite>The Catcher in the Rye</cite> by J.D. Salinger.</p>

In this example, the <cite> tag is used to indicate the title of the book being referenced, which is The Catcher in the Rye by J.D. Salinger.

When the code is rendered in a web browser, it will appear like this:

I just finished reading The Catcher in the Rye by J.D. Salinger.

Overall, the <cite> tag is a useful tool for indicating citations and references in an HTML document, and can be used in a variety of ways to attribute information to its original source or indicate the title of a work.

 

Syntax of HTML cite tag

The HTML cite tag is used to markup a reference to a work or creative work. The syntax of the cite tag is as follows:

<cite>Reference goes here</cite>

Here, the cite tag is an inline element that is used to markup a reference. It can be used within a paragraph, heading, or any other block element.

The cite tag can be used to indicate the source of a quote, or to give credit to the author of a creative work such as a book or a song. It can also be used to indicate a reference to a web page or a document.

Example:

<p>"The only way to do great work is to love what you do." <cite>Steve Jobs</cite></p>

This will create a paragraph with a quote from Steve Jobs, with the citation indicating the author.

Note that the cite tag is not the same as the blockquote tag, which is used to markup a longer quote or block of text. The cite tag should only be used to markup a reference or citation.

The proper syntax for the HTML cite tag is as shown below:

<body>
<p><cite>War and Peace</cite> was one of the greatest books.</p>
</body>

 

Global Attributes

The cite tag is an HTML global attribute that is used to specify a URL or other reference for the information contained within an element.

When the cite attribute is used within certain HTML elements, it specifies the source of the information, such as a book or article, or a web page. For example, the cite attribute can be used within the blockquote or q elements to indicate the source of a quotation.

Here’s an example of how the cite attribute can be used with the blockquote element:

<blockquote cite="https://www.example.com/article.html">
<p>Here's a quote from an article.</p>
</blockquote>

In this example, the cite attribute specifies the URL of the article that the quote came from.

It’s worth noting that while the cite attribute is often used to specify the source of information within an HTML element, it does not actually provide a link to that source. To create a link, you would need to use an <a> element with an href attribute.

 

Event Attributes

I’m sorry, but there is no cite tag in HTML that has event attributes associated with it. The cite tag is a structural element used to specify a reference to a source of information, as I explained in my previous answer.

Event attributes in HTML are used to specify JavaScript code that should be executed in response to a specific user action or event. Some examples of event attributes in HTML include onclick, onmouseover, onkeydown, and onsubmit.

However, it is worth noting that the use of inline event attributes is generally discouraged in modern web development practices in favor of using unobtrusive JavaScript techniques, which separate the JavaScript code from the HTML markup.

 

 

Other Attributes

The cite tag is an HTML structural element that represents a reference to a source of information, typically used to indicate the source of a quotation or other text. It does not have any other specific attributes beyond the global attributes, which can be used with any HTML element.

Some of the global attributes that can be used with the cite tag include:

  • class: Specifies one or more class names for the element, which can be used to apply CSS styles or identify the element for JavaScript manipulation.
  • id: Specifies a unique identifier for the element, which can be used to target the element with JavaScript or for linking within the same document.
  • style: Specifies inline CSS styles for the element.
  • title: Provides additional information about the element, typically displayed as a tooltip when the user hovers over the element.

Here’s an example of using the class and title attributes with the cite tag:

<cite class="source" title="The New York Times">The New York Times</cite>

In this example, the class attribute is used to apply a CSS class named “source” to the cite element, while the title attribute provides additional information about the source.

 

Notes on HTML: cite tag

Here are some important notes on the cite tag in HTML:

  1. The cite tag is a structural element used to indicate a reference to a source of information, such as a book, article, or website.
  2. The cite tag should be used to mark up the title of the source, not the entire citation. The full citation can be included in the surrounding text or in a separate element.
  3. The cite tag should be used for informational purposes only and should not be used to create links or for other interactive purposes.
  4. While the cite tag is not deprecated, it is recommended to use the more semantically-specific blockquote or q elements for quotations, as these elements have built-in support for indicating the source of the quote.
  5. The cite tag can be combined with other HTML elements to indicate the source of specific types of content, such as images or videos.
  6. It is important to use the cite tag responsibly and accurately, citing sources only where appropriate and avoiding plagiarism or misrepresentation of information.

Overall, the cite tag is a useful tool for indicating the source of information in an HTML document, but it should be used judiciously and in accordance with best practices for web development and citation.

 

 

Browser Compatibility

The HTML cite tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML cite tag

We will discuss the HTML cite tag below, with some examples of how to use the cite tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

HTML5 Document

Here’s an example of how the cite tag could be used in an HTML5 document:

<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>According to <cite>The New York Times</cite>, the economy is on the upswing.</p>
<blockquote>
<p>"To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment." - <cite>Ralph Waldo Emerson</cite></p>
</blockquote>
<p>For more information, check out the <a href="https://www.nytimes.com/">New York Times website</a>.</p>
</body>
</html>

In this example, the cite tag is used twice to indicate the source of information. In the first paragraph, the cite tag is used to cite The New York Times as the source of information about the economy. In the second paragraph, a blockquote element is used to present a quotation from Ralph Waldo Emerson, and the cite tag is used to indicate that Emerson is the source of the quotation.

It’s important to note that while the cite tag is a useful tool for indicating the source of information in HTML, it should be used responsibly and accurately, and in accordance with best practices for web development and citation.

HTML 4.01 Transitional Document

Here’s an example of how the cite tag could be used in an HTML 4.01 Transitional document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>According to <cite>The New York Times</cite>, the economy is on the upswing.</p>
<blockquote>
<p>"To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment." - <cite>Ralph Waldo Emerson</cite></p>
</blockquote>
<p>For more information, check out the <a href="https://www.nytimes.com/">New York Times website</a>.</p>
</body>
</html>

In this example, the cite tag is used twice to indicate the source of information. In the first paragraph, the cite tag is used to cite The New York Times as the source of information about the economy. In the second paragraph, a blockquote element is used to present a quotation from Ralph Waldo Emerson, and the cite tag is used to indicate that Emerson is the source of the quotation.

It’s important to note that while the cite tag is a useful tool for indicating the source of information in HTML, it should be used responsibly and accurately, and in accordance with best practices for web development and citation.

 

 

XHTML 1.0 Transitional Document

Here’s an example of how the cite tag could be used in an XHTML 1.0 Transitional document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>According to <cite>The New York Times</cite>, the economy is on the upswing.</p>
<blockquote>
<p>"To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment." - <cite>Ralph Waldo Emerson</cite></p>
</blockquote>
<p>For more information, check out the <a href="https://www.nytimes.com/">New York Times website</a>.</p>
</body>
</html>

In this example, the cite tag is used twice to indicate the source of information. In the first paragraph, the cite tag is used to cite The New York Times as the source of information about the economy. In the second paragraph, a blockquote element is used to present a quotation from Ralph Waldo Emerson, and the cite tag is used to indicate that Emerson is the source of the quotation.

It’s important to note that while the cite tag is a useful tool for indicating the source of information in HTML, it should be used responsibly and accurately, and in accordance with best practices for web development and citation. Additionally, in XHTML documents, it’s important to ensure that all elements are properly closed and that the document conforms to the appropriate syntax rules.

 

 

 

XHTML 1.0 Strict Document

Here’s an example of how the cite tag could be used in an XHTML 1.0 Strict document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>According to <cite>The New York Times</cite>, the economy is on the upswing.</p>
<blockquote>
<p>"To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment." - <cite>Ralph Waldo Emerson</cite></p>
</blockquote>
<p>For more information, check out the <a href="https://www.nytimes.com/">New York Times website</a>.</p>
</body>
</html>

In this example, the cite tag is used twice to indicate the source of information. In the first paragraph, the cite tag is used to cite The New York Times as the source of information about the economy. In the second paragraph, a blockquote element is used to present a quotation from Ralph Waldo Emerson, and the cite tag is used to indicate that Emerson is the source of the quotation.

It’s important to note that while the cite tag is a useful tool for indicating the source of information in HTML, it should be used responsibly and accurately, and in accordance with best practices for web development and citation. Additionally, in XHTML documents, it’s important to ensure that all elements are properly closed and that the document conforms to the appropriate syntax rules, which are more strict in XHTML Strict documents compared to XHTML Transitional documents.

 

XHTML 1.1 Document

Here’s an example of how the cite tag could be used in an XHTML 1.1 document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Page</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>According to <cite>The New York Times</cite>, the economy is on the upswing.</p>
<blockquote>
<p>"To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment." - <cite>Ralph Waldo Emerson</cite></p>
</blockquote>
<p>For more information, check out the <a href="https://www.nytimes.com/">New York Times website</a>.</p>
</body>
</html>

In this example, the cite tag is used twice to indicate the source of information. In the first paragraph, the cite tag is used to cite The New York Times as the source of information about the economy. In the second paragraph, a blockquote element is used to present a quotation from Ralph Waldo Emerson, and the cite tag is used to indicate that Emerson is the source of the quotation.

It’s important to note that while the cite tag is a useful tool for indicating the source of information in HTML, it should be used responsibly and accurately, and in accordance with best practices for web development and citation. Additionally, in XHTML documents, it’s important to ensure that all elements are properly closed and that the document conforms to the appropriate syntax rules, which are more strict in XHTML compared to HTML.

Tags

About the author

View All Posts

Home4Cloud