<blockquote> - элемент цитаты
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Описание
HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключённый в нем текст является развёрнутой цитатой. Обычно он (текст) визуально выделяется наклонным (смотри Примечание, где говорится о том, как это изменить). URI на источник цитаты можно указать в атрибуте cite, тогда как текстовое представление источника может быть задано элементом <cite>.
Интерактивный пример
<div>
<blockquote cite="https://www.huxley.net/bnw/four.html">
<p>
Words can be like X-rays, if you use them properly—they’ll go through
anything. You read and you’re pierced.
</p>
</blockquote>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>
div:has(> blockquote) {
background-color: #ededed;
margin: 10px auto;
padding: 15px;
border-radius: 5px;
}
blockquote p::before {
content: "\201C";
}
blockquote p::after {
content: "\201D";
}
blockquote + p {
text-align: right;
}
| Категории контента | Основной контент, секционный корень, явный контент. |
|---|---|
| Допустимое содержимое | Основной контент. |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает основной контент. |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | HTMLQuoteElement |
Атрибуты
Для данного элемента доступны глобальные атрибуты.
cite-
URL, указывающий на исходный документ или сообщение, откуда была взята цитата. Этот атрибут предназначен для того, чтобы сослаться на информацию, объясняющую контекст, или ссылки, из которых была взята цитата.
Пример
<blockquote cite="http://developer.mozilla.org">
<p>This is a quotation taken from the Mozilla Developer Center.</p>
</blockquote>
Результат:
Спецификации
| Specification |
|---|
| HTML # the-blockquote-element |