HTML <cite> Tag

The HTML <cite> tag is used to define the title of a creative work, such as books, articles, movies, TV shows, songs, and more. It is a semantic tag that indicates a citation or reference to another source.

By default, browsers often render the content inside the <cite> tag in italic style, though this can be customized using CSS.

Basic Example of HTML <cite> Tag

Here’s a basic example of using the <cite> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Cite Example</h2>
        <p>One of my favorite books is <cite>To Kill a Mockingbird</cite> by Harper Lee.</p>
    </body>
</html>

Explanation: In this example, the title of the book is wrapped in the <cite> tag to indicate it is a creative work.

Styling the <cite> Tag

The default style for the <cite> tag is italic text. You can customize its appearance using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            cite {
                font-style: normal;
                font-weight: bold;
                color: #007BFF;
            }
        </style>
    </head>
    <body>
        <h2>Cite Example</h2>
        <p>One of my favorite books is <cite>To Kill a Mockingbird</cite> by Harper Lee.</p>
    </body>
</html>

Result: The title inside the <cite> tag appears with the custom styling applied via CSS.

Special Cases for HTML <cite> Tag

Nested Usage of cite Tag

You can nest the <cite> tag within other elements, such as a blockquote, for citing the source of a quote:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Cite in Blockquote</h2>
        <blockquote>
            "In the middle of every difficulty lies opportunity." 
            <cite>Albert Einstein</cite>
        </blockquote>
    </body>
</html>

Explanation: The <cite> tag here indicates the author of the quote inside the blockquote element.

Citing Websites using cite Tag

You can use the <cite> tag to reference websites or online articles:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Citing a Website</h2>
        <p>For more information, visit <cite><a href="https://www.wikipedia.org">Wikipedia</a></cite>.</p>
    </body>
</html>

Explanation: In this example, the <cite> tag is used with a hyperlink to cite a specific website.

Accessibility Tips for <cite> Tag

When using the <cite> tag:

  • Ensure the cited work is properly identified (e.g., by name or URL).
  • Combine the <cite> tag with semantic elements like <blockquote> or <a> for better context.