DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <cite> Cite Tag

#learnhtml #htmlc

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.

Top comments (0)