Содержание
Если вы когда-либо просматривали список элементов HTML, вы, возможно, задавались вопросом: «Что такое блок-цитата?» Элемент blockquote — это пара тегов HTML, которая используется для определения длинных цитат. Вот определение этого элемента в соответствии со спецификацией W3C HTML5:
Элемент blockquote представляет раздел, который цитируется из другого источника.
Как использовать Blockquote на ваших веб-страницах
Когда вы пишете текст на веб-странице и создаете макет этой страницы, иногда вы хотите вызвать блок текста в виде цитаты. Это может быть цитата из другого места, например, отзыв клиента, который сопровождает тематическое исследование или историю успеха проекта.
Это также может быть дизайнерская обработка, которая повторяет некоторый важный текст из статьи или самого контента. В публикациях это иногда называют pullquote. В веб-дизайне один из способов достижения этого (и способ, который мы рассматриваем в этой статье), называется blockquote.
Итак, давайте посмотрим, как вы будете использовать тег blockquote для определения длинных цитат, таких как этот отрывок из «The Jabberwocky» Льюиса Кэрролла:
Twas Brillig и слизи Toves
Делали круговорот и валялись в вабе
Все мимсы были бороговыми,
И Момент raths Outgrabe.
(Льюис Кэрролл)
Пример использования тега Blockquote
Тег blockquote — это семантический тег, который сообщает браузеру или пользовательскому агенту, что содержимое является длинной цитатой. Таким образом, вы не должны заключать текст, который не является кавычкой, внутри тега blockquote.
Цитата — это часто фактические слова, которые кто-то сказал, или текст из внешнего источника (например, текст Льюиса Кэрролла в этой статье), но это также может быть концепция pullquote, которую мы рассмотрели ранее.
Когда вы думаете об этом, эта цитата представляет собой цитату из текста, просто это происходит из той же статьи, в которой появляется сама цитата.
Большинство веб-браузеров добавляют отступы (около 5 пробелов) по обеим сторонам блочной цитаты, чтобы выделить ее из окружающего текста. Некоторые чрезвычайно старые браузеры могут даже отображать цитируемый текст курсивом. Помните, что это просто стиль по умолчанию элемента blockquote.
С помощью CSS вы можете полностью контролировать отображение вашей цитаты. Вы можете увеличить или даже удалить отступ, добавить фоновые цвета или увеличить размер текста, чтобы далее вызывать цитату. Вы можете переместить эту цитату в одну сторону страницы и обернуть ее другим текстом, который является обычным визуальным стилем, используемым для цитат в печатных журналах.
Вы можете контролировать появление блочной цитаты с помощью CSS, о чем мы поговорим чуть позже. А сейчас давайте продолжим рассмотрение вопроса о том, как добавить саму цитату в разметку HTML.
Чтобы добавить тег blockquote к вашему тексту, просто окружите текст, который является цитатой, следующей парой тегов:
- Открытие:
- Закрытие:
Например:
’Twas brillig и слитные туфли
Делали круговорот и валялись в вабе
Все мимсы были бороговыми,
И Момент raths Outgrabe.
Добавьте пару тегов blockquote вокруг содержимого самой цитаты. В этом примере мы также использовали некоторые теги прерывания (
) для добавления единичных разрывов строк, где это уместно, внутри текста. Это потому, что мы воссоздаем текст из стихотворения, где эти конкретные разрывы важны.
Если вы создавали цитату из отзывов клиентов, и строки не нужно разбивать на отдельные части, вы не захотите добавлять эти теги разрыва и позволять самому браузеру переносить и разбивать по мере необходимости в зависимости от размера экрана.
Не используйте Blockquote для отступа текста
В течение многих лет люди использовали тег blockquote, если они хотели сделать отступ для текста на своей веб-странице, даже если этот текст не был pullquote. Это плохая практика! Вы не хотите использовать семантику blockquote исключительно по визуальным причинам.
Если вам нужно сделать отступ для своего текста, вы должны использовать таблицы стилей, а не теги блочных цитат (если, конечно, то, что вы пытаетесь сделать отступом, не является цитатой!).
