<cite> : Citation element

by

Introduction

The ‘<cite>‘ element in HTML is used to reference the title of a creative work or the name of its author. It is commonly used to mark the title of a book, article, song, movie, or any other piece of content that needs to be cited or referenced. The purpose of the ‘<cite>‘ element is to provide semantic meaning to the text it encloses, indicating that it represents the title of a work.

Here’s a simple example of how to use the ‘<cite>‘ element :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>The <cite>Lord of the Rings</cite> is a classic fantasy novel.</p>
</body>
</html>

Output :

In this example, the ‘<cite>‘ element is used to mark the title of the book “The Lord of the Rings.” Keep in mind that the ‘<cite>‘ element does not automatically apply any styling; it is primarily a semantic element, and you may need to use CSS to style it according to your design preferences.

It’s important to note that while the ‘<cite>‘ element is commonly used for titles, it is not restricted to them. It can also be used to cite the name of an author or the source of a quotation. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <blockquote>
        <p>Wisdom is not a product of schooling but of the lifelong attempt to acquire it.</p>
        <footer><cite>Albert Einstein</cite></footer>
    </blockquote>
</body>
</html>

Output :

In this example “Albert Einstein” is written in ‘<cite>‘ tag. So it appears different from the others.

Remember that while the ‘<cite>‘ element adds semantic meaning, it does not automatically apply any styling. You may need to use CSS to style it according to your design preferences. Additionally, it’s essential to use the ‘<cite>‘ element appropriately based on the specific context of your content.

uses of <cite> tag :

Here are some uses of <cite> tag :

1. Citing Titles of Works : The ‘<cite>‘ element is used to mark the title of the book , newspaper etc.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>I recently read <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
</body>
</html>

2. Citing Author Names : The ‘<cite>‘ element is used to cite the name of the author.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>This article was written by <cite>Jane Doe</cite>.</p>
</body>
</html>

3. Citing Source of Quotations : The ‘<cite>‘ element is used to cite the author of the quoted statement.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <blockquote>
        <p>"To be yourself in a world that is constantly trying to make you something else is the greatest accomplishment."</p>
        <footer><cite>Ralph Waldo Emerson</cite></footer>
    </blockquote>      
</body>
</html>

4. Citing Reference Links : The ‘<cite>‘ element can be used to cite the source of a reference link, helping users understand the origin of the linked content.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>For more information, refer to the official documentation on <cite><a href="https://learncodingself.com/">learncodingself.</a></cite>.</p> 
</body>
</html>

5. Marking Technical Terms or Code : The ‘<cite>‘ element is used to cite the source of information .

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>The `<code>print()</code>` function is used to display output in many programming languages.</p>
<p>For more details, see the documentation on <cite><a href="https://www.geeksforgeeks.org/printf-in-c/">print function</a></cite>.</p>
</body>
</html>

Leave a Comment