Если вы когда-либо просматривали список элементов HTML, возможно, вы обнаружили, что спрашиваете: «Что такое блок-образец?» Элемент blockquote представляет собой пару тегов HTML, которая используется для определения длинных котировок. Вот определение этого элемента в соответствии со спецификацией W3C HTML5:
Элемент blockquote представляет собой раздел, который цитируется из другого источника.
Как использовать Blockquote на своих веб-страницах
Когда вы пишете текст на веб-странице и создаете макет этой страницы, вы иногда хотите вызывать блок текста как цитату. Это может быть цитата из другого места, например, отзывы клиента, которая сопровождает тематическое исследование или историю успеха проекта. Это также может быть дизайн, который повторяет некоторый важный текст из статьи или самого контента. В публикации это иногда называют тягой-цитатой. В веб-дизайне один из способов достижения этого (и способ, которым мы освещаем в этой статье) называется блочным комментарием.
Итак, давайте посмотрим, как вы будете использовать тег blockquote для определения длинных котировок, например, этот отрывок из «The Jabberwocky» Льюиса Кэрролла:
'Twas brillig и slithey tovesСделал ли в вабе врет и жужжание:Всеми мимиками были бороги,И мама расхаживает.
(Льюис Кэрролл)
Пример использования тега Blockquote
Тег blockquote - это семантический тег, который сообщает браузеру или пользовательскому агенту, что содержание является длинной цитатой. Таким образом, вы не должны вставлять текст, который не является котировкой внутри тега blockquote. Помните, что «цитата» часто представляет собой фактические слова, которые кто-то сказал или текст из внешнего источника (например, текст Льюиса Кэрролла в этой статье), но это Можно также являемся концепцией pullquote, которую мы рассмотрели ранее. Когда вы думаете об этом, этот pullquote является цитатой текста, это просто происходит из той же статьи, что и сама цитата.
Большинство веб-браузеров добавляют несколько отступов (около 5 пробелов) к обеим сторонам блока, чтобы выделить его из окружающего текста. Некоторые чрезвычайно старые браузеры могут даже выделять курсивный текст курсивом. Помните, что это просто стиль по умолчанию элемента blockquote. С помощью CSS у вас есть полный контроль над тем, как будет отображаться ваш blockquote. Вы можете увеличивать или даже удалять отступ, добавлять цвета фона или увеличивать размер текста для дальнейшего вызова цитаты. Вы можете поместить эту цитату на одну сторону страницы и обернуть ее другим текстом, который является общим визуальным стилем, используемым для рекламных материалов в печатных журналах. У вас есть контроль над появлением blockquote с CSS, что мы обсудим чуть позже. В настоящее время давайте продолжим рассмотрение вопроса о том, как добавить цитату непосредственно к вашей разметке HTML.
Чтобы добавить тег blockquote в текст, просто разместите текст, который представляет собой цитату со следующей парой тегов -
Например:
'Twas brillig и slithey toves Сделал ли в вабе врет и жужжание: Всеми мимиками были бороги, И мама расхаживает.Как вы можете видеть, вы просто добавляете пару тегов blockquote вокруг содержимого самой цитаты. В этом примере мы также использовали некоторые теги break () для добавления разрывов строк, где это необходимо внутри текста. Это потому, что мы воссоздаем текст из стихотворения, где эти конкретные перерывы важны. Если вы создавали рекомендательную цитату клиента, и линии не нуждались в разрыве в определенных частях, вы не хотели бы добавлять эти теги разрыва и позволять самому браузеру обертываться и разбиваться по мере необходимости на основе размера экрана.
Не использовать Blockquote для текста отступа
На протяжении многих лет люди использовали тег blockquote, если они хотели отступать текст на своей веб-странице, даже если этот текст не был pullquote. Это плохая практика! Вы не хотите использовать семантику blockquote исключительно по визуальным соображениям. Если вам нужно отступывать текст, вы должны использовать таблицы стилей, а не теги blockquote (если, конечно, то, что вы пытаетесь отступом, является цитатой!). Попробуйте поместить этот код на свою веб-страницу, если вы просто пытаетесь добавить отступ:
Это будет текст с отступом.
Затем вы должны настроить таргетинг на этот класс с помощью стиля CSS
.indented {
padding: 0 10px;}
Это добавляет 10 пикселей отступов по обе стороны абзаца.
