Open In App

HTML < cite> Tag

Last Updated : 17 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The <cite> tag in HTML is used to define the title of a creative work, such as a book, article, song, or movie. It is typically used to provide a citation for a source of information or to give credit to the original creator of the work.

Note: The content inside the <cite> tag is usually displayed in italics by default in most browsers.

  • The <cite> tag should not be used for general references or citations of authors or creators; it is specifically for titles of works.
  • Using the <cite> tag helps improve the semantic structure of your HTML document, making it clearer to both users and search engines what the cited content represents.
  • The <cite> tag also supports the Global Attributes and Event Attributes in HTML.
html 
<!DOCTYPE html>
<html>

<body>
    <p>This is normal paragraph text</p>
    <cite>This is cite tag text</cite>
</body>

</html>

Output:

This is normal paragraph text
This is cite tag text
  • The <cite> tag is used to denote the title of a creative work, such as a book, article, or song.
  • By default, browsers render content within the <cite> tag in italics to indicate a citation.

Syntax:

<cite> Title of Work </cite>

More Example of <cite> Tag

Citing a Book Title

HTML 
<!DOCTYPE html>
<html>
<body>
    <div class="content">
        <p>One of the most influential books in the field of computer science is
          <cite>Introduction to Algorithms</cite>
          by Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein.
      </p>
    </div>
</body>
</html>
  • The <cite> tag is used to enclose the title of the book "Introduction to Algorithms," indicating that it is a reference to a specific work.
  • The text within the <cite> tag is typically displayed in italics by default, distinguishing it as a title.

Styling the <cite> Tag

HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        .content {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        cite {
            font-style: normal;
            color: #2a9d8f;
            background-color: #e9f5f3;
            padding: 2px 4px;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div class="content">
        <p>For comprehensive tutorials on web development, visit
            <cite>GeeksforGeeks</cite>
            , a platform offering a wide range of programming resources.
        </p>
    </div>
</body>

</html>
  • In this example, the <cite> tag is styled to have a normal font style (removing the default italics), a custom text color (#2a9d8f), and a light background color (#e9f5f3).
  • Additional styling includes padding and rounded corners to enhance the visual presentation of the citation.

Why Use HTML Cite Tag?

  • Provides semantic meaning to titles of works, improving the clarity of content.
  • Enhances accessibility and SEO by properly marking up citations.
  • Automatically applies italics for better readability and visual distinction.
  • Easy to style with CSS for custom visual presentation.

Interesting Facts about HTML Cite Tag

  • The <cite> tag is primarily used for titles of creative works such as books, articles, and websites.
  • It is not meant for general references or citations of authors or creators.
  • Supports global and event attributes, making it flexible for interactive designs.
  • Default browser styling usually italicizes the content for better differentiation.

Next Article
HTML Introduction

R
R_Raj
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox