Цитата с подписью: figure, blockquote и читаемая композиция
Отдельно выделенный фрагмент можно оформить как figure с blockquote и подписью figcaption. Такая композиция связывает текст с пояснением, не превращая подпись в часть цитаты.
Назначение
Отдельно выделенный фрагмент можно оформить как figure с blockquote и подписью figcaption. Такая композиция связывает текст с пояснением, не превращая подпись в часть цитаты.
Как это работает
Blockquote содержит сам цитируемый фрагмент, figcaption — сведения о нём. Отступы задаются CSS, а декоративная линия отделяет блок от основного текста. В примере используется специально написанная учебная фраза.
Пример
<style>.quote{margin:1.5rem 0;padding:1rem;border-inline-start:.3rem solid #176b50;background:#eff7f2}.quote blockquote{margin:0}.quote figcaption{margin-top:.8rem;font-size:.95em}</style>
<figure class="quote"><blockquote><p>Сначала сформулируйте ожидаемый результат, затем меняйте по одному условию проверки.</p></blockquote><figcaption>Учебная памятка: пример оформления цитаты</figcaption></figure>Что должно получиться
Фраза и её подпись образуют один визуальный блок. Без стилей порядок остаётся логичным: сначала текст, затем пояснение. Пример не приписывает фразу внешнему автору.
Граница применения и частая ошибка
Не добавляйте имя известного человека или источник, если происхождение фразы не подтверждено. Атрибут cite у blockquote не создаёт видимую ссылку; ссылку на реальный источник нужно при необходимости вывести отдельно. Не делайте декоративную кавычку единственным обозначением цитирования.
Самостоятельная проверка
Подставьте короткий фрагмент, который вы вправе цитировать, и честную подпись источника. Проверьте длинный текст, узкое окно и чтение без CSS. Убедитесь, что подпись не выглядит продолжением цитаты.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.