Тег blockquote (от английского block quotation, «блочная цитата») отмечает длинную цитату из другого источника: отдельный фрагмент чужого текста, который может состоять из нескольких абзацев. Тег парный, закрывающий обязателен. Браузер выводит его блоком с отступами слева и справа, но кавычек не добавляет. Собственный атрибут у тега один, cite: адрес источника, читателю он не виден.
<blockquote>
<p>Хорошая вёрстка начинается с понятной структуры.</p>
<p>Оформление добавляют позже.</p>
</blockquote>В этой статье
- Тег blockquote в HTML: для чего предназначен
- Отступы тега blockquote: сколько места остаётся тексту
- Что можно записывать внутри blockquote
- Тег blockquote и cite: атрибут и указание источника
- Оформление blockquote в CSS: рамка, фон и кавычки
- Тег blockquote, q или aside: как выбрать
- Частые ошибки с тегом blockquote
Тег blockquote в HTML: для чего предназначен
Тег blockquote предназначен для цитаты из другого источника, которая занимает отдельный блок: несколько предложений, абзац или несколько абзацев. Внутри находится только процитированный текст. Короткая фраза внутри предложения записывается тегом q.
Стандарт запрещает использовать blockquote в трёх случаях: чтобы просто сдвинуть текст вправо, для реплик диалога и для цитаты из вашей же статьи, вынесенной в крупную врезку. Для отступа есть CSS-свойства margin и padding, а врезку из своего текста размечают тегом aside. Читать: раздел о blockquote в WHATWG.
Кавычек этот тег не добавляет, в отличие от q. При копировании абзаца из blockquote в буфер попадает только текст цитаты.
Отступы тега blockquote: сколько места остаётся тексту
По умолчанию браузер выводит blockquote блоком с полями 16 px сверху и снизу и 40 px слева и справа. Внутренний абзац своих полей поверх этих не добавляет: между цитатой и соседним абзацем остаётся 16 px.
Сорок пикселей с каждой стороны на широком экране почти незаметны, а на телефоне забирают около сорока процентов ширины: в колонке 207 px тексту остаётся 127 px.
Заметнее всего это при вложенности. Каждый вложенный blockquote сдвигается ещё на 40 px, и на телефоне у третьего уровня для текста не остаётся места вовсе (в замере его ширина равна нулю). То же с figure: у него свои 40 px слева, поэтому цитата внутри него сужается ещё сильнее, и в той же колонке тексту остаётся 47 px.
Поля уменьшают правилом margin: запись margin: 1em 0 сохраняет вертикальные отступы и убирает боковые. Вокруг цитаты внутри figure обнуляют поля самого figure. Слева цитату при этом удобно выделить линией, чтобы она не слилась с текстом.
blockquote {
margin: 1em 0;
padding-left: 1em;
}
figure {
margin: 0;
}Пример: сколько места остаётся тексту
Кнопки меняют, как записана цитата и какие у неё поля. Кадр сам измеряет, сколько ширины осталось самой вложенной цитате, и показывает долю столбиком. Ширина кадра зависит от экрана, поэтому числа у вас могут отличаться от указанных в тексте.
Что можно записывать внутри blockquote
Внутри blockquote допустимо любое блочное содержимое: абзацы, списки, заголовки, блоки кода, а в абзацах строчные теги. Чаще всего это абзацы: каждый абзац цитаты записывают отдельным p.
<blockquote>
<p>Перед публикацией проверьте:</p>
<ul>
<li>заголовки идут по порядку;</li>
<li>у картинок есть описание.</li>
</ul>
</blockquote>Цитату разрешено сокращать. Пропуск обозначают многоточием в квадратных скобках, а пояснение, которого нет в оригинале, тоже записывают в квадратных скобках. Стандарт прямо допускает такие правки внутри цитаты.
Пример: как сократить цитату
Нажимайте на предложения оригинала, чтобы их пропустить: подряд идущие пропуски записываются одним знаком [...]. Кнопка ниже добавляет пояснение в квадратных скобках. Разметка и вид цитаты меняются сразу.
Внутрь можно вложить и другой blockquote: так оформляют цитату в цитате, например на форумах. Помните про поля: на телефоне вложенность быстро съедает ширину, как показано в разделе про отступы.
Сам blockquote нельзя записывать внутрь абзаца p: браузер закроет абзац, а на его месте после блока останется пустой абзац.
Тег blockquote и cite: атрибут и указание источника
Атрибут cite у blockquote хранит адрес источника для программ: читатель его не видит, а высота блока с ним не меняется. Название источника и автора записывают видимым текстом вне цитаты: в figcaption внутри figure или в абзаце после неё.
<figure>
<blockquote cite="https://example.com/guide">
<p>Хорошая вёрстка начинается с понятной структуры.</p>
</blockquote>
<figcaption>Из руководства <cite>Основы вёрстки</cite></figcaption>
</figure>Внутри самого blockquote тег cite допустим только тогда, когда название упомянуто в процитированном тексте. Почему указание источника находится вне цитаты, чем элемент отличается от атрибута и что писать вместо имени автора, разобрано на странице тега cite, в разделе где указать источник цитаты. У figure свои поля, поэтому для узких экранов смотрите правило из раздела про отступы.
Оформление blockquote в CSS: рамка, фон и кавычки
У blockquote в браузере нет ни рамки, ни фона, ни кавычек, только поля. Цитату обычно выделяют линией слева и лёгким фоном.
blockquote {
margin: 1em 0;
padding: 0.5em 1em;
border-left: 4px solid #d8a25a;
background: #faf5ee;
}Если нужна кавычка, её рисуют через ::before и записывают знак кодом: так безопасно для любой кодировки файла. Кавычка из CSS не входит в текст страницы и при копировании не попадает в буфер, как и у тега q.
blockquote p:first-child::before {
content: "\201C";
}Курсив стандарт цитате не предписывает: его добавляют по вкусу. Оформление можно менять как угодно, а смысл остаётся в теге, поэтому не заменяйте blockquote блоком div с линией слева.
Пример: оформление цитаты
Кнопки включают и выключают отдельные правила. В блоке «Правила CSS» видно, что записано, ниже - вид цитаты и текущие боковые поля, измеренные браузером.
Тег blockquote, q или aside: как выбрать
Выбор тега зависит от того, откуда взят текст и как он связан с остальным. Чужие слова целым блоком - blockquote, чужие слова внутри предложения - q, цитата из вашего же текста, вынесенная во врезку, - aside. Всё остальное, включая отступ и диалоги, не цитата.
| Ситуация | Что записать |
|---|---|
| Длинная цитата из другого источника | blockquote |
| Короткая фраза внутри предложения | q |
| Цитата из вашей же статьи в боковой врезке | aside |
| Реплики диалога | Обычные абзацы |
| Просто сдвинуть текст вправо | CSS: margin или padding |
Пример: какой тег нужен
Для каждой из пяти ситуаций выберите подходящий вариант. После ответа кадр показывает правильный вариант и объясняет выбор, а внизу считает верные ответы.
Частые ошибки с тегом blockquote
Ошибки с этим тегом делятся на две группы: его записывают там, где цитаты нет, и не учитывают его поля на узких экранах.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
blockquote ради отступа обычного текста | Тег обещает «это чужая цитата», а там свой текст, стандарт такое запрещает | CSS: margin или padding |
Вложенные blockquote с полями по умолчанию | На телефоне у третьего уровня для текста не остаётся места | margin: 1em 0 и padding-left |
Цитата в figure с полями по умолчанию | Складываются поля figure и blockquote, на телефоне тексту остаётся узкая полоса | figure { margin: 0 } |
Название источника записано внутри blockquote | Источник смешивается с чужим текстом, а по стандарту он находится вне цитаты | figcaption или абзац после цитаты |
blockquote записан внутрь абзаца p | Абзац закрывается сам, а после блока остаётся пустой абзац | Закрыть p до blockquote |
От blockquote ждут кавычек | Тег добавляет только поля, кавычек нет | Кавычка через ::before или без кавычек |
Цитата из вашей же статьи записана в blockquote | Это не чужой источник, стандарт предлагает aside | aside |
Реплики диалога записаны в blockquote | Стандарт не рекомендует использовать тег для диалогов | Обычные абзацы |
Атрибуту cite приписывают видимость | Адрес читателю не виден, высота блока не меняется | Видимое указание источника в figcaption |
