Blockquote html что это

Цитирование в HTML: выбираем теги правильно

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «Quoting in HTML: Quotations, Citations, and Blockquotes».

Неправильное использование HTML-тегов для обозначения цитат встречается слишком часто. В этой статье мы углубимся в эту тему, разберем разные ситуации и рассмотрим, какие теги для них подходят.

При оформлении цитат используются три основных элемента:

Давайте по ним пройдемся.

Элемент

используются для выделения цитаты на фоне остального контента. Мой учитель английского языка в старшей школе крепко вбил мне в голову, что любая цитата длиной в четыре строки и больше должна отделяться от остального текста. В спецификациях HTML таких требований нет, но если у вас есть в тексте цитата и вы хотите, чтобы она была выделена на фоне всего остального, тег

По умолчанию браузеры выделяют цитату при помощи отступа, добавляя margin с каждой стороны.

Как блочный элемент,

может содержать внутри себя другие элементы. Например, мы без проблем можем разбить цитату на абзацы:

Но дело не ограничивается абзацами! Внутри блока

используется для выделения цитат, а не как декоративный элемент дизайна. Пользователи, использующие скринридеры, могут перемещаться между цитатами. Поэтому использование

для чисто эстетических нужд может сбивать этих пользователей с толку. Если вам просто нужно выделить какой-то текст, не являющийся цитатой, пожалуй, лучшим решением будет элемент

Выделение цитаты при помощи тега

Теги предназначены для цитат внутри текста. Мой учитель английского сказал бы, что речь идет о цитатах длиной меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки к цитатам в виде псевдоэлементов, но для более старых браузеров стоит иметь запасной вариант.

See the Pen The Q Tag by CSS-Tricks (@css-tricks) on CodePen.

Атрибут cite

— могут использовать атрибут cite (от англ. «citation» — ссылка). Этот атрибут содержит URL, предоставляющий контекст и/или ссылку на цитируемый материал. В спецификации указано, что URL может быть окружен пробелами. Я не знаю, зачем это отдельно оговаривается, но если вы действительно хотите разозлить божеств семантического кода, вам придется делать нечто большее, чем просто разбрасываться пробелами.

Сам атрибут cite по умолчанию для пользователей не виден. Но вы можете добавить немного CSS-магии, как в приведенном ниже примере. Можно даже сделать так, чтобы источник появлялся при наведении мыши на цитату.

Элемент

Теги должны использоваться для указания произведений, а не на имени человека, написавшего или сказавшего что-либо. Иными словами, этот элемент вообще не предназначен для цитат. Вот примеры из спецификаций:

Если автор этой статьи скажет, что даст вам пирожок, чтобы вы окружили тегами его имя, это будет семантически неправильно, так что пирожка вам не видать. А если вы окружите этими тегами название статьи, в которой вам предлагался пирожок, это будет семантически правильно, но пирожок предлагался не за это, так что очень жаль, но он вам все же не достанется.

По умолчанию браузеры выделяют элемент cite курсивом. Сам элемент не привязан к элементами или

Помещать элемент вне блока цитаты тоже кажется неправильным. Кроме того, если вы захотите стилизовать цитату и источник совместно, вам придется заключить оба элемента в какой-нибудь другой элемент, например, в

Все же есть один способ подписать цитату так, чтобы семантические божества были довольны: вы можете поместить элемент

Несмотря на то что при таком подходе количество необходимых элементов удваивается, он имеет ряд преимуществ:

Ничто из перечисленного не предназначено для оформления диалогов

Все перечисленные элементы предназначены для привлечения внимания. А диалоги это просто обмен репликами между людьми, которые разговаривают или переписываются друг с другом. (Прим. перев.: в английском языке диалоги передаются непрямой речью, при помощи кавычек).

Для диалогов не должны использоваться ни

и знаки пунктуации, а также или для обозначения говорящего.

Доступность цитат

Еще немного о кавычках

можно добавлять кавычки, используя псевдоэлементы CSS. Элемент сам по себе добавляет кавычки, но можно добавить их в виде псевдоэлементов — в качестве костыля для более старых браузеров, где они не добавляются автоматически. Это не повредит отображению цитаты в современных браузерах: они перезаписывают установленные по умолчанию псевдоэлементы, а не просто добавляют дополнительные.

Но не следует предполагать, что так вы точно получите «умные» открывающие и закрывающие кавычки. Даже если браузер поддерживает умные кавычки, порой отображаются просто прямые. Чтобы обезопасить себя, лучше использовать свойство CSS quotes:

Многоуровневое цитирование

Теперь давайте обратим внимание на уровни цитирования. Тег автоматически их учитывает.

Допустим, вы работаете в регионе, где применяется британское соглашение об использовании одинарных кавычек. Вы можете прописать очередность применения разных типов кавычек в правило CSS quotes, указав одинарные кавычки (открывающую и закрывающую) первыми в списке. Вот пример с двумя вариантами:

Вложенность цитирования не ограничена. Вложенные элементы могут быть даже внутри блока

, находящегося внутри другого блока

Если вы добавляете кавычки к цитате, оформленной с помощью элемента

, не забывайте, что в нем не предусмотрена автоматическая смена кавычек в зависимости от уровня цитирования (как в ). Если вы хотите иметь кавычки внутри

, возможно, нужно добавить правило для комбинированного селектора, чтобы элементы внутри

выделялись одинарными кавычками (или двойными, если вы следуете британскому соглашению).

Последний указанный вами вариант кавычек будет использоваться для всех последующих уровней цитирования. Если вы хотите, чтобы во вложенных цитатах чередовались одинарные и парные кавычки, добавьте в свойство quotes побольше уровней.

Висячая пунктуация

Многие эксперты в сфере типографии скажут вам, что висячая пунктуация в цитатах выглядит лучше (и они правы). По сути, висячая пунктуация это кавычки, вынесенные за текст, выровненный по вертикали.

Для достижения такого эффекта можно использовать небольшое отрицательное значение свойства text-indent. Точное значение может варьироваться в зависимости от шрифта, так что обязательно проверьте величину отступа с тем шрифтом, который используете.

Есть и лучший способ сделать висячую пунктуацию: можно использовать CSS-свойство hanging-punctuation. Но на момент написания этой статьи оно поддерживается только в Safari:

Использование hanging-punctuation лучше, потому что это свойство просто работает, если может.

Можно ли анимировать кавычки?

Погодите, возможно, это как раз неплохой вариант для оформления воображаемых кавычек!

Источник

Тег blockquote в HTML

Что делает тег blockquote в HTML?

определяют часть текста, которая является прямой цитатой. В то же время элемент следует использовать, когда цитата представляется встроенным в окружающий текст. Но когда цитата представляется в виде отдельного абзаца, то тег

является более подходящим элементом.

Стилизация элемента blockquote

Ваш стиль применения

зависит от вашего конкретного дизайна сайта, но есть несколько вещей, которые стали довольно распространенной практикой. Вам не обязательно следовать за ними, но вы можете обнаружить, что это полезно. Наиболее распространенной практикой для стилизации

Другой очень распространенный шаблон стиля — это разместить вертикальную линию или границу вдоль левого края цитаты. Обычно содержимое

Использование тега вместо

Хотя рекомендация W3C для HTML5 гласит, что элемент может включать имя автора (вместе с заголовком), лучше всего следовать стандарту WHATWG и использовать его только для названия произведения.

Элемент

Почти все знают и используют элемент

Источник

Что такое blockquote в html

HTML тег

(от англ. «block quote» ‒ «блочная цитата») предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.

Синтаксис

Закрывающий тег

Атрибуты

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент

со следующими значениями CSS по умолчанию:

Различия между HTML 4.01 и HTML5

В HTML 4.01 элемент определял длинную цитату, а в HTML5 определяет раздел, который цитируется из другого источника.

Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос.

Атрибуты

cite URL, указывающий на исходный документ или сообщение, откуда была взята цитата. Этот атрибут предназначен для того, чтобы сослаться на информацию, объясняющую контекст, или ссылки, из которых была взята цитата.

Пример

This is a quotation taken from the Mozilla Developer Center.

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Примечание

Чтобы изменить отступ элемента

HTML тег

(HTML Block Quotation Element) используется для определения в документе блочной цитаты (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа (по умолчанию 40 пикселей).

Поддержка браузерами

Атрибуты

Пример использования

Атрибут cite указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера.

Ниже приведён пример, как это отбражается в браузере (к заголовкам применен тег

, а между примерами использован тег – горизонтальная черта):

Пример использования коротких и длинных цитат в HTML.

Источник

Цитирование в HTML

Дата публикации: 2020-01-16

От автора: слишком часто можно увидеть неправильный HTML-код, используемый для цитат в разметке. В этой статье давайте разберемся со всем этим, рассмотрим различные ситуации и разные HTML-теги для этих ситуаций.

В цитатах используются три основных элемента HTML:

blockquote

Теги blockquote используются для того, чтобы цитируемый текст отличался от остального содержимого. Мой учитель английского в десятом классе вложил мне в голову, что любая цитата из четырех или более строк должна быть выделена таким образом. Спецификация HTML не содержит такого требования, но когда текст является цитатой, и вы хотите, чтобы он был отделен от окружающего текста и тегов, blockquote является семантическим выбором.

По умолчанию браузеры вставляют отступы, добавляя поля с каждой стороны.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как элемент потока (то есть элемент «уровня блока»), blockquote может содержать внутри другие элементы. Например, мы можем без проблем вставить абзацы:

Но это могут быть и другие элементы, такие как заголовок или неупорядоченный список:

Важно отметить, что blockquote должны использоваться только для цитат, а не как декоративный элемент в дизайне. Это также способствует доступности, поскольку пользователи программы чтения с экрана могут переходить между цитатами. Таким образом, элемент blockquote, используемый исключительно для эстетики, может действительно запутать этих пользователей. Если вам нужно что-то более декоративное, выходящее за пределы расширенных цитат, то, возможно, лучше использовать div с классом.

Теги q предназначены для встроенных цитат или, как сказал бы мой учитель в десятом классе, тех, что имеют меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки для цитат в качестве псевдо-элементов, но для старых браузеров может потребоваться резервное решение.

Атрибут cite

Источник

HTML Цитирование

В этой главе узнаем HTML элементы

Пример

Данная цитата с сайта фонда:

Втечении 50 лет, Всемирный фонд дикой природы защищает будущее природы. Ведущая мировая организация по сохранению природы, WWF работает в 100 странах и поддерживается 1,2 миллионом членов в США и около 5 миллионов членов во всем мире.

Цитирование

, определяет раздел, который процитируется из другого источника.

Браузеры, как правило, обычно делают отступ строк с помощью элемента

Пример

Цитата с сайта фонда:

За 50 лет, Всемирный фонд дикой природы защищает будущее природы.
Это ведущая мировая организация по сохранению природы,
WWF работает в 100 странах и поддерживается
,2 миллионами членов в США и
около 5 миллионов во всем мире.

Короткое цитирование

Пример

Цель WWF: Построить будущее, где люди будут жить в гармонии с природой.

Аббревиатура

Маркировка аббревиатур может дать полезную информацию браузерам, системам перевода и поисковым системам.

Совет: Используйте атрибут global title для отображения описания аббревиатуры/акронима при наведении курсора мыши на элемент.

Пример

Контактная информация

Контактная информация может быть адресом электронной почты, URL адресом, физическим адресом, номером телефона, ручкой социальных сетей и т.д.

Пример

Название работы

HTML элемент определяет название творческого произведения (например, книги, стихотворения, песни, фильма, картины, скульптуры и т. д.).

Текст в книге элемент обычно визуализируется как italic.

Пример

Картина Крик Эдварда Мунка, написана в 1893.

Двунаправленное переопределение

BDO расшифровывается как двунаправленное переопределение.

HTML элемент используется для переопределения текущего направления текста:

Пример

HTML Упражнения

HTML Цитаты и элементы цитирования

Тег	Описание
	Определяет аббревиатура или акроним
	Определяет контактную информацию документа автора/владельца
Определяет направление текста
	Определяет раздел, который процитирован из другого источника
Определяет название работы
Определяет короткие цитаты

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Упражнения

Тесты

КАК СДЕЛАТЬ

ПОДЕЛИТЬСЯ

СЕРТИФИКАТЫ

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:

Ваше предложение:

Спасибо, за вашу помощь!

Ваше сообщение было отправлено в SchoolsW3.

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

Источник