Сite и blockquote: перезагрузка

Frequently Asked Questions

1. What Attributes Are Compatible With The HTML Cite Tag?

Both global attributes and event handler content attributes can be used with the HTML cite tag. Let’s take a look at what those attributes are exactly below.

Global Attributes

The HTML cite tag can be used with all global attributes as they are accessible across all HTML elements. The attributes are:

accesskey
autocapitalize
class
contenteditable
data-*
dir
draggable
hidden

id
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype

lang
part
slot
spellcheck
style
tabindex
title
translate

Event Handler Content Attributes

The HTML cite tag can be used with all event handler content attributes. These allow us to invoke scripts within our HTML code. Moreover, an event handler content attribute is invoked when an event happens and each event handler deals with a specific event.

Most of them can be used with all HTML elements but some of them have specific rules as to when they can be used and by which elements.

2. Where Is the HTML Cite Tag Mainly Used?

The HTML cite tag is mainly used to cite poems, books, quotes, films, theatrical productions, television programs, songs, operas, research papers or reports, computer programs, comments, tweets and even Facebook comments or posts.

It is not mandatory but quite notable that the reference to a creative work in the <cite> tag can have a person’s name according to the W3C specification. But the WHATWG specifies exactly the opposite. According to that, a person’s name can never be included in a citation, under any circumstances.

3. What Is The Browser Compatibility of The Cite Tag in HTML?

Browser compatibility differs depending on whether you are using the desktop or mobile version of the browser, so we will give you the details about each one to help you out:

Mobile Version

Browsers	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
cite tag	Yes	Yes	4	Yes	Yes	Yes

4. How Can I Style an HTML Cite Tag?

You can use CSS to style the HTML cite tag, and these are the properties you can employ to do so along with what each one does:

CSS font-style property specifies the style of font which can be normal / italic / oblique / initial / inherit.
CSS font-family property specifies a list of important font-family names for a selected element.
CSS font-size property specifies the size of the font.
CSS font-weight property specifies if the font should be bold or thick.
CSS text-transform property takes care of the text case and capitalization.
CSS text-decoration property specifies any other text decoration that we add to the text. It includes text-decoration-line, text-decoration-color and text-decoration-style.
CSS color property specifies the font color, and the CSS background-color specifies the background color of the element.

Text Layout Style For HTML Cite Tag

CSS text-indent property specifies how the indentation is done for the first line of the text.
CSS text-overflow property specifies how the overflowing text is shown to the user.
CSS white-space property defines how the white space is formatted.
CSS word-break property defines where the line-break occurs.

Other CSS Properties That Can Be Implemented With <Cite> Tag

CSS text-shadow property gives shadow to the text.
CSS text-align-last property defines the last line alignment.
CSS line-height property defines the line height.
CSS letter-spacing property specifies the space between the characters in a word.
CSS word-spacing property defines the space between words.

Оформления цитаты с кавычками

Традиционный способ оформления цитаты заключается в использовании кавычек. Это самый популярный стиль, который часто используется. Кавычки могут быть одинарными или двойными, как было упомянуто ранее в статье.

<blockquote>
   Текст...
   <cite>Автор Цитаты</cite>
</blockquote>

blockquote {
        font-size: 16px;
        font-style: italic;
        padding: 20px 20px 20px 30px;
        margin: 20px 0;
        border: 1px solid #333;
        position: relative;
}

blockquote::before {
        content: "\201C";
        /* Левая кавычка */
        position: absolute;
        top: -15px;
        left: 20px;
        font-size: 56px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #333;
        padding-left: 8px;
        line-height: 1.3;
}

blockquote::after {
        content: "\201D";
        /* Правая кавычка */
        position: absolute;
        bottom: -15px;
        right: 20px;
        font-size: 56px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #333;
        padding-left: 8px;
        line-height: 1.3;
}
blockquote cite {
        display: block;
        margin-top: 10px;
        font-size: 14px;
        color: #555;
}

<blockquote>
   Текст...
</blockquote>

blockquote {
        font-size: 16px;
        font-style: italic;
        padding: 20px 20px 20px 30px;
        margin: 20px 0;
        background-color: #f9f9f9;
        position: relative;
        z-index: 2;
}
blockquote::after {
        content: "\201D";
        position: absolute;
        top: -31px;
        left: -13px;
        font-size: 253px;
        color: #e3e3e3;
        z-index: -1;
}

<blockquote>
   Текст...
</blockquote>

blockquote {
        font-size: 16px;
        font-style: italic;
        padding: 20px 20px 20px 30px;
        margin: 20px 0;
        background-color: #efefef;
        position: relative;
}
blockquote::after {
        content: "\201D";
        position: absolute;
        top: 50%;
        left: -25px;
        font-size: 56px;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #1eadd9;
        padding-left: 8px;
        line-height: 1.3;
        transform: translateY(-50%);
        color: #fff;
}

Understanding The HTML Cite Attribute

The HTML cite attribute is used to specify the URL of the source or document from where we have obtained the creative content like a quote, poem etc. This attribute can be used with the following elements:

<blockquote>
<del>
<q>
<ins>

Moreover, the HTML attribute values are URLs that specify the URL pertaining to the source of reference wor. The URLs can either be Absolute URLs that direct to a website, or can be Relative URLs that direct to a file on a website.

– Example Using the HTML Cite Attribute

<!DOCTYPE html><html><head><title>HTML cite Attribute</title><style>del {color: blue;}ins {color: red;}</style></head><body><h1>HTML cite Attribute</h1><p>An object<del id=”HCA”cite=”https://www.britannica.com/science/Newtons-laws-of-motion”>will</del><ins> will not</ins> change its motion unless a force acts on it.</p></body></html>

Оформление цитат в минимализме

Минимализм всегда приветствуется – просто и со вкусом. Несколько линий, фон подходящего цвета – стильная цитата готова

Такой дизайн встречается на многих сайтах, и его главная цель – выделить цитату от остального контента, чтобы пользователь сразу обратил внимание на эту часть текста

<blockquote>
   Текст...
   <cite>Автор Цитаты</cite>
</blockquote>

blockquote {
        border-left: 2px solid #333;
        padding: 20px 20px 20px 30px;
        margin: 20px 0;
        font-style: italic;
        background: #f7f7f7;
}

blockquote cite {
        display: block;
        margin-top: 10px;
        font-style: normal;
        color: #555;
}
blockquote cite:before {
        content: "\2014\00a0";
}

<blockquote>
   <p>Текст...</p>
   <cite>Автор Цитаты</cite>
</blockquote>

blockquote {
        font-size: 16px;
        font-style: italic;
        padding: 20px 20px 20px 30px;
        margin: 20px 0;
        background-color: #fff5e8;
        border-left: 2px solid #cc962e;
}

blockquote p:first-letter {
        font-family: "Times New Roman";
        font-size: 200%;
        color: #cc962e;
        line-height: 1;
}
blockquote cite {
        display: block;
        margin-top: 10px;
        font-size: 14px;
        color: #555;
}

<blockquote>
   Текст...
   <cite>Автор Цитаты</cite>
</blockquote>

blockquote {
        font-size: 16px;
        font-style: italic;
        padding: 20px 20px 20px 30px;
        margin: 20px 0;
        background-color: #f6e5a2;
        position: relative;
        border-radius: 10px;
        font-family: "Times New Roman";
        font-size: 20px;
}

blockquote:before {
        content: "";
        width: 35px;
        height: 35px;
        display: block;
        background: #f6e5a2;
        position: absolute;
        bottom: -10px;
        left: 159px;
        transform: rotate(45deg);
}

blockquote p {
        line-height: 1.2;
}

blockquote cite {
        display: block;
        margin-top: 10px;
        font-size: 14px;
        color: #555;
}
blockquote cite:before {
        content: "\2014\00a0";
}

How To Use the HTML Cite Tag: Coding Examples

The HTML <cite> tag is enclosed in the <body> tag, and the syntax for the HTML cite element is as follows:

<cite> Referenced Content….. </cite>

Moreover, here are some basic and not-so-basic coding examples you can utilize:

– Example in HTML5

<!DOCTYPE html><html><head><meta charset = “UTF-8”><title> How to use HTML cite element in HTML5 </title></head><body><h2> HTML cite tag </tag><p> Example of normal paragraph text </p><cite> Example of cite tag text </cite></body></html>

– Example in HTML4

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><meta http-equiv = “Content-Type” content = “text/html; charset=utf-8”><title> How to use HTML cite element in HTML4</title></head><body><h2> HTML cite tag </tag><p> Example of normal paragraph text </p><cite> Example of cite tag text </cite></body></html>

– Example in XHTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv = “Content-Type” content = “text/html; charset=utf-8”><title> How to use HTML cite element in XHTML</title></head><body><h2> HTML cite tag </tag><p> Example of normal paragraph text </p><cite> Example of cite tag text </cite></body></html>

The output remains the same for inputs.

HTML cite tag

Example of normal paragraph text

Example of cite tag text

– Example: Create Title of Creative Content

The HTML cite tag can be used to reference the title of a quote or piece of work. In this example, the quote is written inside the <blockquote> tag and the source is mentioned in the <cite> tag:

<blockquote>“Two roads diverged in a wood, and I – I took the one less traveled by, And that has made all the difference.”</blockquote><cite> The Road Not Taken, Robert Frost </cite>

“Two roads diverged in a wood, and I – I took the one less traveled by, And that has made all the difference.”

The Road Not Taken, Robert Frost

– Example: Mentioning an Author’s Name

You can also cite an author’s name when using the HTML cite tag. Moreover, in the example below, the <q> tag is used to write the quote and the HTML cite tag is used to mention the name:

<p><cite> Oscar Wilde </cite> once said <q>Be yourself; everyone else is already taken.</q></p>

Note: This feature is only available in HTML5.

Oscar Wilde once said “Be yourself; everyone else is already taken.”

– Example: Adding a URL

The HTML cite tag can also contain a URL to reference a quote. Here is an example that you can adapt to your own code:

<blockquote> “Two things are infinite: the universe and human stupidity; and I’m not sure about the universe.” </blockquote><cite><a href = “https://www.goodreads.com/quotes”> Albert Einstein </a></cite>