What Is a Cite Tag?
The World Wide Web Consortium, or W3C, defines eight "phrase tags" that are used within other elements to change the appearance and emphasis of a bit of text. One of these tags is the <cite> tag, which is designed to reference a citation on your page.
Other People Are Reading
-
The <cite> Tag
-
Cite is used to put emphasis on a citation, such as emphasising the title or speaker a quote originates from. The W3C has not depreciated this tag, but it does recommend the use of CSS over <cite>. However, <cite> does send a very specific message to anyone looking at the source HTML for your page, including automated bots, and can be used for customization of your page.
Appearance
-
Text within the <cite> tag looks identical to text within the <em> or <i> tag. While a different browser could, in theory, render text within <cite> differently, this is not the case on any of the modern browsers, including Internet Explorer, Firefox and Chrome.
-
Use
-
The only reason to use <cite> over any other tag is that it allows search engines to see and understand the text between the tags as a citation. However, it can also be used with CSS to create specific effects. You can go as simple as setting anything in a <cite> tag as center-aligned and purple, e.g.,
cite {
color: purple;
text-align: center;}This allows you to differentiate between citations and italic statements, and give your quotes a bit of punch on the page.
Alternatives
-
On the phrase tags code page the W3C states that using CSS provides a richer effect than the basic use of <cite>. You could create a CSS class to use in place of anywhere you would use <cite>, with more specific styling to a wider range of elements, such using it with either a <p> or a <div> tag. The HTML would look something like this, if your citation element was bold and had a border along the bottom:
.cite {
font-weight: bold;
border-bottom: 1px solid #000000;}When applied to an element, it would simply require: <p class="cite">citation</p> or <div class="cite">Super Long Citation</div>.
If you want the simple italicize appearance but don't want to use the <cite> tag, you can use <em> instead.
-
