Атрибут cite тега <blockquote> — джерело великої цитати
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
Вважається хорошою звичкою давати джерело цитати, якщо воно існує.
автор: с3с
Синтаксис
<blockquote cite="URL">Атрибут cite може отримувати єдине значення:
-
URL -
URL-адреса посилання на джерело цитати.
Можливі значення:
- Абсолютний URL - вказує на інший сайт (наприклад, href="http://www.example.com/default.htm")
- Відносний URL - вказує на файл в межах веб-сайту (наприклад, href="default.htm")
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута cite теґа <blockquote>
<p>З використанням тегу <code>blockquote</code></p>
<hr>
<blockquoteb cite = "https://ru.wikiquote.org/wiki/Цитата">
Ваш час обмежений, не витрачайте його, проживаючи чуже життя. Не попадайтеся на гачок віровчення, яке існує на уявленнях інших людей. Не дозволяйте поглядам інших заглушати свій власний внутрішній голос. І дуже важливо мати мужність слідувати своєму серцю та інтуїції. Вони, так чи інакше, вже знають, що ви дійсно хочете зробити. Все інше – другорядне. – Стів Джобс
</blockquoteb>
<hr>
<br>
<p>Без використання тегу <code>blockquote</code></p>
<hr>
<p>Ваш час обмежений, не витрачайте його, проживаючи чуже життя. Не попадайтеся на гачок віровчення, яке існує на уявленнях інших людей. Не дозволяйте поглядам інших заглушати свій власний внутрішній голос. І дуже важливо мати мужність слідувати своєму серцю та інтуїції. Вони, так чи інакше, вже знають, що ви дійсно хочете зробити. Все інше – другорядне. – Стів Джобс</p>
<hr>Три записи однієї цитати: із cite (на вигляд нічого не змінилося), із правилом content: attr(cite), яке показує приховану адресу, і повний правильний варіант із figure, figcaption та видимим посиланням. Нижче — коротка цитата в q, якій лапки домалював браузер.
HTML
<p class="head">1. Атрибут є, і його не видно</p>
<blockquote cite="https://example.com/dzherelo">
<p>Дизайн — це не те, як воно виглядає. Дизайн — це як воно працює.</p>
</blockquote>
<p class="head">2. Те саме, але адресу показано правилом у стилях</p>
<blockquote class="reveal" cite="https://example.com/dzherelo">
<p>Дизайн — це не те, як воно виглядає. Дизайн — це як воно працює.</p>
</blockquote>
<blockquote class="reveal">
<p>А тут атрибута немає зовсім.</p>
</blockquote>
<p class="head">3. Так джерело бачить читач</p>
<figure>
<blockquote cite="https://example.com/dzherelo">
<p>Дизайн — це не те, як воно виглядає. Дизайн — це як воно працює.</p>
</blockquote>
<figcaption>— Стів Джобс, <cite>Розмова з The New York Times</cite>,
<a href="https://example.com/dzherelo">джерело</a></figcaption>
</figure>
<p class="head">4. Коротка цитата в рядку</p>
<p>Він сказав <q cite="https://example.com/dzherelo">дизайн — це як воно працює</q> —
і лапки тут домалював браузер, у розмітці їх немає.</p>CSS
p {
margin: 12px 0;
max-width: 560px;
}
.head {
margin: 24px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
blockquote {
max-width: 560px;
outline: 2px dashed #b9c6d8;
background: #f6f9ff;
}
blockquote p {
margin: 10px 0;
}
.reveal::after {
display: block;
padding: 0 0 8px;
color: #1b4f9c;
font-family: ui-monospace, monospace;
font-size: .85em;
content: "cite = " attr(cite);
}
.reveal:not([cite])::after {
color: #c0392b;
content: "cite = атрибута немає";
}
figure {
max-width: 560px;
margin: 0;
padding: 4px 0 0;
}
figcaption {
padding-left: 40px;
color: #5a6472;
}Коментарі
Коментарів ще немає — будьте першим!