<blockquote> HTML-элемент цитаты с блочным отображением

Элемент <blockquote> HTML обозначает, что заключённый в него текст является развёрнутой цитатой. Обычно она визуально отображается с отступом (см. раздел Примечания, чтобы узнать, как изменить его). URL источника цитаты можно указать с помощью атрибута 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;
}

Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

cite

URL, указывающий на исходный документ или сообщение, содержащие цитируемую информацию. Этот атрибут предназначен для ссылки на информацию, поясняющую контекст цитаты или её источник.

Примечания по использованию

Согласно спецификации, указание авторства цитаты, если оно есть, должно размещаться за пределами элемента <blockquote>.

Чтобы изменить отступ цитируемого текста, используйте свойства CSS margin-left и/или margin-right либо сокращённое свойство margin.

Чтобы включить короткие цитаты в строку, а не в отдельный блок, используйте элемент <q> (цитата).

Примеры

В этом примере показано использование элемента <blockquote> для цитирования фрагмента из RFC 1149 — Стандарта передачи IP-дейтаграмм с помощью авианосцев.

<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside early spring. This
    is because of the 3D ether space available to the carriers, in contrast to
    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Элемент <q> для встроенных цитат.
• Элемент <cite> для указания источников.
• Элемент blockquote на heydonworks.com (2024)