DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <cite> Cite Tag

In HTML, the Cite tag defines the reference or title of the creative work such as poem , essay , script , film , painting , etc. Usually, most of the browsers render the text inside the cite tag in Italics. You can change the style by using the CSS property.

Tips : You can use the cite tag or “cite” attribute to define the reference source of the content within the blockquotes or q tags.

Syntax:

This tag contains both the starting cite tag and ending cite tag. The content is written between these two tags.


<cite> Enter your text here </cite>

Enter fullscreen mode Exit fullscreen mode

HTML cite Tag:

| HTML cite tag | Defines the reference of the source |
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Phrasing content. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTML Element. The HTML Span Element interface for this element. |

Sample of the HTML cite Tag:


<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
<h2>Sample for HTML Cite tag</h2>
    <p>"Don't Let Yesterday Take Up Too Much Of Today".</p><br>
<cite>Will Rogers</cite> 
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Result:

Result

Download Sample File:

HTML-Cite-TagDownload

Attributes:

The cite tag supports the global attributes and the event attributes.

Styling Methods for cite Tag:

You can use the following properties to style an HTML cite tag.

Properties to style the visual weight/emphasis/size of the text in cite tag:

  • CSS font-style – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
  • CSS font-family – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
  • CSS font-size – This CSS property will help to set the size of the font.
  • CSS font-weight – This CSS property used to define whether the font should be bold or thick.
  • CSS text-transform – This CSS property will control the text case and capitalization.
  • CSS test-decoration – This CSS property specifies the decoration added to text such as text-decoration-line , text-decoration-color , text-decoration- style.

Styles to coloring the text in cite Tag:

  • CSS color – This CSS property will specify the color of the text content and decorations.
  • CSS background-color – This CSS property helps to set the background color of an element.

Text layout styles for cite Tag:

  • CSS text-indent – This CSS property is used to specify the indentation of the first line in a text block.
  • *CSS text-overflow * – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
  • CSS white-space – This CSS property describes how white-space inside an element is handled.
  • CSS word-break – This CSS property decides where the lines should be broken.

Other Properties for cite Tag:

  • CSS text-shadow – This CSS property helps to add the shadow to text.
  • CSS text-align-last – This CSS property will set the alignment of the last line of the text.
  • CSS line-height – This CSS property defines the height of a line.
  • CSS letter-spacing – This CSS property helps to decide the spaces between letters/characters in a text.
  • CSS word-spacing – This CSS property specifies the spacing between every word.

Browser Support:

Browser Support

Related Articles:

The post HTML Cite Tag appeared first on Share Point Anchor.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more