Для вёрстки цитат используются теги <q> и <blockquote>. Тег <q> применяется для выделения коротких цитат внутри текста, это строчный элемент. Тег <blockquote> позволяет создавать отдельный блок с большой цитатой.
Цитату можно выделить из основного текста с помощью отличающегося начертания шрифта или цвета текста. До и после содержимого тега <q> браузер автоматически ставит кавычки. В русском языке ставятся „лапки“ или «ёлочки». Переопределить кавычки можно с помощью CSS-свойства quotes.
👉 Не используйте тег <q> для других видов текста — перевода или шутки, так как это не семантично.
Тег <blockquote> подходит для цитат, которые выделены в отдельную секцию. Это уже не просто текстовый элемент, но и элемент для разметки секций. Значит, у цитаты можно разметить свой заголовок, «шапку», «подвал» и текстовые элементы.
Особенности вёрстки цитат
Вместе с тегом <blockquote> используется атрибут cite, который также может выступать как отдельный тег. И атрибут, и тег применяются для указания источника цитаты, ссылки на произведение или автора. При этом атрибут cite не виден на странице, он нужен для соблюдения авторского права.
Пример оформленной цитаты с тегом cite:
Важно не путать цитату с важной акцентной мыслью в тексте. Такие выделяющиеся мысли не имеют авторства, они предназначены для создания структуры текста. Их рекомендуется верстать либо как отдельный абзац <p> со своим оформлением шрифта, либо выделять предложение тегом <strong>.
Способы оформления цитат
Стандартный и распространённый вариант оформления — изменить шрифт, цвет текста, сделать его крупнее или изменить начертание. Также можно менять семейство шрифтов, межстрочное расстояние, делать буквы прописными.
Ещё один вариант — оформить цитату как центрированный блок с использованием шрифта-капитель:
Обводки или рамки
К стандартному оформлению часто добавляют рамки или обводки.
Помимо простой рамки, можно делать объёмную с помощью теней:
Обратный отступ
Следующий вариант — выделить цитату с помощью обратного отступа в тексте.
Фоновый цвет
Если нужно контрастно выделить цитату, добавьте фон.
В примере задан фоновый цвет для блока цитаты и добавлены небольшие отступы вокруг текста.
Чтобы цитата смотрелась интереснее, можно сделать фон в виде цветного блока с круглыми углами: