HTML тег `<blockquote>`

Значение и применение

HTML тег <blockquote> (HTML Block Quotation Element) используется для определения в документе блочной цитаты (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа (по умолчанию 40 пикселей).

Обращаю Ваше внимание, что для использования коротких (строчных) цитат в документе, существует специальный HTML элемент <q>.

Авторство и ссылка на источник не входят в цитируемый текст: разместите их за пределами <blockquote>. Удобно объединить цитату и подпись в <figure>, а подпись оформить через <figcaption>. Атрибут cite не создаёт видимой ссылки; её добавляют отдельно. Не используйте цитату только ради отступов — это задача CSS.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.blockquote
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`blockquote`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2
`cite`	✓1	✓12	✓1	✓15	✓≤4	✓18	✓4	✓14	✓≤3.2	✓1.0	✓4.4	✓≤3.2

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`cite`	`URL`	Указывает URL адрес ресурса/документа, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера. Допускается указывать как абсолютные адреса (например: `<blockquote cite = "http://basicweb.ru/html/tag_blockquote.php">`), так и относительные (например: `<blockquote cite = "tag_blockquote.php">`.

Пример, попробуйте сами

Отдельный блок цитаты

Замените текст цитаты или добавьте в неё второй абзац. Подпись источника расположена за пределами blockquote.

index.html

HTML

<p>В памятке для редакторов сказано:</p>
<blockquote>
  <p>Каждый пример должен помогать читателю проверить одну понятную идею.</p>
</blockquote>
<p>Из учебной памятки «Работа с примерами».</p>

Цитата, автор и видимая ссылка на источник

Сравните два варианта: атрибут cite сам не показывает ссылку. Во втором варианте автор и ссылка находятся в figcaption, за пределами цитируемого текста. figure объединяет цитату с подписью. Измените текст подписи: содержимое blockquote останется прежним.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Длинные цитаты из «Каштанки»</title>
  </head>
  <body>
    <p>Тони слушает рассказ Антона Чехова «Каштанка». Вот его начало:</p>
    <blockquote cite="https://ru.wikisource.org/wiki/Каштанка_(Чехов)">
      <p>Молодая рыжая собака — помесь такса с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
    </blockquote>
    <p>Та же цитата с подписью и ссылкой на источник:</p>
    <figure>
      <blockquote cite="https://ru.wikisource.org/wiki/Каштанка_(Чехов)">
        <p>Молодая рыжая собака — помесь такса с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
      </blockquote>
      <figcaption>— Антон Чехов, <cite><a href="https://ru.wikisource.org/wiki/Каштанка_(Чехов)">«Каштанка»</a></cite></figcaption>
    </figure>
  </body>
</html>

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент определял длинную цитату, а в HTML5 определяет раздел, который цитируется из другого источника.

Значение CSS по умолчанию

CSS

blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <blockquote>