Содержание
Тег blockquote
Пример
Раздел, который цитируется из другого источника:
<blockquote cite=»http://www.worldwildlife.org/who/index.html»>
В течение 50 лет WWF защищает будущее природы. Ведущая в мире Организация по сохранению, WWF работает в 100 странах и поддерживается 1 200 000 членами в Соединенных Штатах и близка к 5 000 000 по всему миру.
</blockquote>
Определение и использование
Тег <blockquote> определяет раздел, который цитируется из другого источника.
Обозреватели обычно выносят отступы <blockquote> элементы.
Поддержка браузера
| Элемент | |||||
|---|---|---|---|---|---|
| <blockquote> | Да | Да | Да | Да | Да |
Советы и примечания
Совет: Использовать <q> для встроенных (коротких) котировок.
Различия между HTML 4,01 и HTML5
В HTML 4,01 тег <blockquote> определяет длинное предложение.
В HTML5 тег <blockquote> определяет раздел, который цитируется из другого источника.
Различия между HTML и XHTML
Примечание: Чтобы проверить элемент <blockquote> как XHTML, он должен содержать только другие элементы уровня блока, например:
<blockquote>
<p>Вот
длинная цитата здесь длинная цитата.</p>
</blockquote>
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| cite | URL | Указывает источник предложения |
Глобальные атрибуты
Тег <blockquote> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <blockquote> также поддерживает Атрибуты событий в HTML.
Похожие страницы
HTML DOM Ссылки: Blockquote Object
Параметры CSS по умолчанию
В большинстве обозревателей элемент <blockquote> будет отображаться со следующими значениями по умолчанию:
Пример
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
| HTML | WebReference
Элемент <blockquote> (от англ. block quote — блок с цитатой) предназначен для выделения длинных цитат внутри документа. Текст внутри <blockquote> отображается как выровненный блок с отступами слева и справа (по 40 пикселей), а также с отбивкой сверху и снизу.
Синтаксис
<blockquote>Цитата</blockquote>Закрывающий тег
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>blockquote</title>
</head>
<body>
<p>Возможно, Ленин использовал фразу А. П. Чехова из произведения
«Моя жизнь (рассказ провинциала)» гл. VI, первая публикация которого
была в приложении к «Ниве» в 1896 г.</p>
<blockquote>
Учиться нам нужно, учиться и учиться, а с глубокими
общественными течениями погодим: мы ещё не доросли
до них и, по совести, ничего в них не понимаем.
</blockquote>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение <blockquote>
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
| Справочник HTML
Элемент <blockquote> (от англ. «block quote» ‒ «блочная цитата») предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.
Примечание: Для использования коротких (строчных) цитат в документе, существует специальный HTML элемент <q>.
Синтаксис
<blockquote>Цитата</blockquote>Закрывающий тег
Обязателен.
Атрибуты
- cite
- Адрес, который указывает на источник цитаты.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <blockquote> со следующими значениями CSS по умолчанию:
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}Различия между HTML 4.01 и HTML5
В HTML 4.01 элемент определял длинную цитату, а в HTML5 определяет раздел, который цитируется из другого источника.
Пример использования:
Элемент <blockquote>
Пример HTML:
Попробуй сам
<p>Здесь будет уместно изречение Мишеля де Монтеня:</p>
<blockquote>
"Если я цитирую других, то лишь для того, чтобы лучше выразить свою собственную мысль".
</blockquote>Спецификации
Поддержка браузерами
| Элемент | ||||||
| <blockquote> | 3+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <blockquote> | 1+ | 1+ | 6+ | 1+ |
Что такое Blockquote?
Автор Глеб Захаров На чтение 4 мин. Просмотров 97 Опубликовано
Если вы когда-либо просматривали список элементов HTML, вы, возможно, задавались вопросом: «Что такое блок-цитата?» Элемент blockquote – это пара тегов HTML, которая используется для определения длинных цитат. Вот определение этого элемента в соответствии со спецификацией W3C HTML5:
Элемент blockquote представляет раздел, который цитируется из другого источника.
Как использовать Blockquote на ваших веб-страницах
Когда вы пишете текст на веб-странице и создаете макет этой страницы, иногда вы хотите вызвать блок текста в виде цитаты. Это может быть цитата из другого места, например, отзыв клиента, который сопровождает тематическое исследование или историю успеха проекта.
Это также может быть дизайнерская обработка, которая повторяет некоторый важный текст из статьи или самого контента. В публикациях это иногда называют pullquote. В веб-дизайне один из способов достижения этого (и способ, который мы рассматриваем в этой статье), называется blockquote.
Итак, давайте посмотрим, как вы будете использовать тег blockquote для определения длинных цитат, таких как этот отрывок из «The Jabberwocky» Льюиса Кэрролла:
‘Twas brillig и slithey toves
Неужели круговорот и хихиканье в wabe:
Все мимсы были бороговыми,
И Момент негодовал.
(Льюис Кэрролл)
Пример использования тега Blockquote
Тег blockquote – это семантический тег, который сообщает браузеру или пользовательскому агенту, что содержимое является длинной цитатой. Таким образом, вы не должны заключать текст, который не является кавычкой, внутри тега blockquote.
Цитата часто представляет собой фактические слова, которые кто-то сказал, или текст из внешнего источника (например, текст Льюиса Кэрролла в этой статье), но это может также быть концепцией pullquote, которую мы рассмотрели ранее.
Когда вы думаете об этом, эта цитата представляет собой цитату из текста, просто это происходит из той же статьи, в которой появляется сама цитата.
Большинство веб-браузеров добавляют отступы (около 5 пробелов) по обеим сторонам блочной цитаты, чтобы выделить ее из окружающего текста. Некоторые чрезвычайно старые браузеры могут даже отображать цитируемый текст курсивом. Помните, что это просто стиль по умолчанию элемента blockquote.
С помощью CSS вы можете полностью контролировать отображение вашей цитаты. Вы можете увеличить или даже удалить отступ, добавить фоновые цвета или увеличить размер текста, чтобы далее вызывать цитату. Вы можете переместить эту цитату в одну сторону страницы и обернуть ее другим текстом, который является обычным визуальным стилем, используемым для цитат в печатных журналах.
Вы можете контролировать появление блочной цитаты с помощью CSS, о чем мы поговорим чуть позже. А сейчас давайте продолжим рассмотрение вопроса о том, как добавить саму цитату в разметку HTML.
Чтобы добавить тег blockquote к вашему тексту, просто окружите текст, который является цитатой, следующей парой тегов:
- Открытие:
- Закрытие:
Например:
'Twas brillig и slithey tovesНеужели круговорот и хихиканье в wabe:
Все безобразия были borogoves,
И mome raths outgrabe .
Добавьте пару тегов blockquote вокруг содержимого самой цитаты. В этом примере мы также использовали некоторые теги разрыва (
), чтобы добавить разрывы строк, где это уместно, внутри текста. Это потому, что мы воссоздаем текст из стихотворения, где эти конкретные разрывы важны.
Если вы создавали цитату из отзывов клиентов, и строки не нужно разбивать на отдельные части, вы не захотите добавлять эти теги разрыва и позволять самому браузеру переносить и разбивать по мере необходимости в зависимости от размера экрана.
Не используйте Blockquote для отступа текста
В течение многих лет люди использовали тег blockquote, если они хотели сделать отступ для текста на своей веб-странице, даже если этот текст не был pullquote. Это плохая практика! Вы не хотите использовать семантику blockquote исключительно по визуальным причинам.
Если вам нужно сделать отступ для своего текста, вы должны использовать таблицы стилей, а не теги блочных цитат (если, конечно, то, что вы пытаетесь сделать отступом, не является цитатой!).
HTML Тег . Справочник тегов. Уроки для начинающих. W3Schools на русском
Пример
Раздел, цитируемый из другого источника:
<blockquote cite=»http://www.worldwildlife.org/who/index.html»>
Вот уже 50 лет WWF защищает будущее природы. Всемирный фонд дикой природы (WWF), ведущая в мире природоохранная организация, работает в 100 странах, и его поддерживают 1,2 миллиона членов в США и около 5 миллионов во всем мире.
</blockquote>
Попробуйте сами »
Больше примеров «Попробуйте сами» ниже.
Определение и использование
Тег <blockquote> определяет раздел, цитируемый из другого источника.
Браузеры обычно делают отступ в элементах <blockquote> (см. пример ниже, чтобы узнать, как удалить отступ).
Советы и примечания
Совет: Используйте <q> для встроенных (коротких) цитат.
Поддержка браузерами
| Элемент | |||||
|---|---|---|---|---|---|
| <blockquote> | Yes | Yes | Yes | Yes | Yes |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| cite | URL | Указывает источник цитаты |
Глобальные атрибуты
Тег <blockquote> также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Тег <blockquote> также поддерживает Атрибуты событий в HTML.
Больше примеров
Пример
Используйте CSS, чтобы удалить отступ в элементе цитаты:
blockquote {
margin-left: 0;
}
<p>Вот цитата с сайта WWF:</p>
<blockquote
cite=»http://www.worldwildlife.org/who/index.html»>
Вот уже 50 лет WWF защищает будущее природы. Всемирный фонд дикой природы (WWF), ведущая в мире природоохранная организация, работает в 100 странах, и его поддерживают 1,2 миллиона членов в США и около 5 миллионов во всем мире.
</blockquote>
</body>
</html>
Попробуйте сами »
Связанные страницы
HTML DOM справочник: Объект Blockquote
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент <blockquote> со следующими значениями по умолчанию:
Пример
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Попробуйте сами »
Тег blockquote в HTML. Различия с cite и q. Применение CSS border.
Что делает тег blockquote в HTML?
Элементом <blockquote> определяют часть текста, которая является прямой цитатой. В то же время элемент <quote> следует использовать, когда цитата представляется встроенным в окружающий текст. Но когда цитата представляется в виде отдельного абзаца, то тег <blockquote> является более подходящим элементом.
При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы <blockquote>отделить цитируемый текст</blockquote> от окружающего текста.
Стилизация элемента blockquote
Ваш стиль применения <blockquote> зависит от вашего конкретного дизайна сайта, но есть несколько вещей, которые стали довольно распространенной практикой. Вам не обязательно следовать за ними, но вы можете обнаружить, что это полезно. Наиболее распространенной практикой для стилизации <blockquote> является отступ с помощью CSS margin. Обычно это применяется только для левой стороны выделяемого контента, однако в полностью выровненном тексте может быть полезно разместить поля с обеих сторон цитаты.
justified { text-align: justify; } blockquote { margin: 0 45px; }
<div>
<p>При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы</p>
<blockquote>
отделить цитируемый текст
</blockquote>
<p>от окружающего текста.</p>
</div>
Другой очень распространенный шаблон стиля — это разместить вертикальную линию или границу вдоль левого края цитаты. Обычно содержимое <blockquote> выставляется в соответствии с краем текста, что требует использования padding вместо margin для достижения правильного отступа. CSS border находятся внутри margin и за пределами padding. Вы также можете установить левое поле (margin) на 0, чтобы переопределить поле по умолчанию. Это хорошо работает независимо от того, оправдан ли текст.
blockquote { padding: 0 45px; margin-left: 0; border-left: 2px solid gray; }
<p>При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы</p>
<blockquote>
отделить цитируемый текст
</blockquote>
<p>от окружающего текста.</p>ружающего текста.
Использование тега <cite> вместо <blockquote>
Некоторые программисты рекомендуют использовать элемент <cite> для определения источника цитаты. Однако это не разрешено в соответствии со стандартом HTML5. Есть некоторые разногласия относительно того, что именно должен содержать элемент <cite>, но и W3C, и WHATWG согласны с тем, что этот элемент не следует использовать для цитат. Элемент <cite> должен использоваться для идентификации названия произведения, а не его автора или источника произвольной цитаты.
Использование тега cite <blockquote> Вы должны использовать элемент cite для определения источника цитаты. — <cite>Some People</cite> </blockquote>
Хотя рекомендация W3C для HTML5 гласит, что элемент <cite> может включать имя автора (вместе с заголовком), лучше всего следовать стандарту WHATWG и использовать его только для названия произведения.
Элемент <q>
Почти все знают и используют элемент <blockquote>, но очень немногие составители HTML-документов знают или используют элемент <q>, который представляет собой встроенную цитату. Поскольку знаки препинания в разных регионах различны, вы можете рассмотреть возможность использования тега <q> в качестве альтернативы типографским кавычкам.
КАК: Что такое Blockquote? — Определение HTML-тегов
Если вы когда-либо просматривали список элементов 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 пикселей отступов по обе стороны абзаца.
HTML-тег blockquote
Пример
Раздел, цитируемый из другого источника:
На протяжении 50 лет WWF защищает будущее природы. Всемирный фонд дикой природы, ведущая в мире природоохранная организация, работает в 100 странах, и его поддерживают 1,2 миллиона членов в США и около 5 миллионов во всем мире.
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег
определяет раздел, цитируемый из другого источника.
Браузеры обычно делают отступ
элементов
(посмотрите на пример ниже, чтобы узнать, как удалить отступ).Советы и примечания
Совет: Используйте
для встроенных (коротких) цитат.Поддержка браузера
Элемент Есть Есть Есть Есть Есть Атрибуты
Атрибут Значение Описание цитировать URL Указывает источник предложения Глобальные атрибуты
Тег
также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
Используйте CSS, чтобы удалить отступ в элементе цитаты:
цитата {
поле слева: 0;
}Вот цитата из WWF
сайт:cite = "http://www.worldwildlife.org/who/index.html ">
На протяжении 50 лет WWF
защищает будущее природы. Ведущая в мире консервация
организации, WWF работает в 100 странах и получает поддержку 1,2 миллиона
членов в Соединенных Штатах и около 5 миллионов во всем мире.