Выделенная цитата в HTML и CSS (blockquote)
Напишите цитату и автора, выберите стиль и цвета. Предпросмотр показывает цитату посреди текста.
Как пользоватьсяФраза, которая удерживает читателя
Доступно на: 
Выделенная цитата в HTML и CSS (blockquote): для чего нужен
Выделите фразу посреди текста: отзыв клиента, отрывок интервью или главную мысль поста. Напишите цитату, автора и должность и выберите один из пяти стилей: боковая линия, крупные кавычки, карточка, крупная по центру и цветная полоса, с нужным цветом акцента и шрифтом.
Код использует figure, blockquote и figcaption — семантический способ разметить цитату с автором — и принимает адрес источника в атрибуте cite. Предпросмотр показывает цитату между двумя абзацами, как она выглядит в настоящем посте.
Как пользоваться
- Напишите цитату и автора.
- Выберите стиль, цвет и шрифт.
- Скопируйте код на сайт.
Когда использовать
- Выделенный отзыв на главной странице.
- Отрывок интервью в блоге.
- Яркая фраза посреди поста.
Частые вопросы
Чем отличаются blockquote и q?
blockquote — для блочной цитаты, отделённой от текста, как те, что создаёт этот инструмент. q — для короткой цитаты внутри предложения, кавычки в этом случае ставит сам браузер.
Как правильно указать автора?
Оберните цитату в figure и поместите автора в figcaption сразу под ней, как в созданном коде. Имя автора не помещают внутрь blockquote, потому что оно не является частью сказанного. Если цитата взята со страницы, используйте атрибут cite с её адресом.
Можно ли использовать как отзыв клиента?
Можно, для выделенного отзыва. Используйте настоящие фразы с разрешения человека. Для нескольких отзывов вместе используйте генератор отзывов для сайта.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.