Что такое blockquote в html
Тег blockquote в HTML
Что делает тег blockquote в HTML?
определяют часть текста, которая является прямой цитатой. В то же время элемент следует использовать, когда цитата представляется встроенным в окружающий текст. Но когда цитата представляется в виде отдельного абзаца, то тег
является более подходящим элементом.
Стилизация элемента blockquote
Ваш стиль применения
зависит от вашего конкретного дизайна сайта, но есть несколько вещей, которые стали довольно распространенной практикой. Вам не обязательно следовать за ними, но вы можете обнаружить, что это полезно. Наиболее распространенной практикой для стилизации
Другой очень распространенный шаблон стиля — это разместить вертикальную линию или границу вдоль левого края цитаты. Обычно содержимое
Использование тега вместо
Хотя рекомендация W3C для HTML5 гласит, что элемент может включать имя автора (вместе с заголовком), лучше всего следовать стандарту WHATWG и использовать его только для названия произведения.
Элемент
Почти все знают и используют элемент
Цитирование в 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 лучше, потому что это свойство просто работает, если может.
Можно ли анимировать кавычки?
Погодите, возможно, это как раз неплохой вариант для оформления воображаемых кавычек!
Элементы цитирования и направление текста
В этой статье мы с Вами рассмотрим как на языке HTML оформить дословную выдержку из какого-либо текста, или одним словом «цитата», рассмотрим нюансы работаты с разнонаправленным текстом и Восточно-азиатскими символами.
В соответствии с действующим законодательством Российской Федерации допускается без согласия автора или иного правообладателя и без выплаты вознаграждения, но с обязательным указанием имени автора, произведение которого используется, и источника заимствования: цитирование в оригинале и в переводе в научных, полемических, критических или информационных целях правомерно обнародованных произведений в объеме, оправданном целью цитирования, включая воспроизведение отрывков из газетных и журнальных статей в форме обзоров печати.
Короткие цитаты
HTML тег (HTML Quote Element) используется для выделения коротких цитат (строчная цитата). Как правило, все современные браузеры автоматически устанавливают открывающиеся и закрывающиеся кавычки в начале и в конце выделенного текста.
Перейдем к рассмотрению примера:
Ниже приведён пример, как это отображается в браузере:
Рис. 23 Пример использования коротких цитат в HTML.
Длинные цитаты
По аналогии с тегом атрибут cite тега
cite = «http://basicweb.ru/html/tag_blockquote.php» > ), так и относительные (например:
Ниже приведён пример, как это отображается в браузере:
Рис. 23а Пример использования длинных цитат в HTML.
HTML название произведения
HTML тег (HTML Citation Element) предназначен для выделения названия произведений. Он должен включать название работы или ссылку на творчество (URL-адрес). По умолчанию, браузеры отображают элементы курсивом.
В браузере это выглядит следующим образом:
Рис. 23б Пример использования названий произведений в HTML.
Направление вывода текста
Тег применяется с атрибутом dir и значениями ltr (left-to-right), или rtl (right-to-left), задающими направление текста слева направо, либо справа налево.
с атрибутом dir (направление текста в HTML).»> Рис. 24 Пример использования тега с атрибутом dir (направление текста в HTML).
В HTML 5 тег 
изолирует фрагмент текста, который должен отображаться в другом направлении письма и позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью письма.
Результат нашего примера:
Рис. 25 Пример использования разнонаправленных языков.
Обращаю Ваше внимание, что браузеры Internet Explorer и Edge не поддерживают тег .
Нюансы восточно-азиатских символов.
Фуриганы, как правило, отображаются мелким шрифтом над иероглифами (основным текстом) и содержат подсказки по их произношению и переводу. В элементе полезный текст фуриганы обозначается элементом .
Тег определяет, что отображать браузеру, который не поддерживает тег . Если браузер поддерживает тег , то текст, который находится внутри тега не отобразится для пользователя.
Результат нашего примера:
Рис. 26 Использование фуриган в HTML.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Подсказка: чтобы достичь такого ровного текста, его необходимо выровнять по ширине.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
Что такое blockquote в html
Для вставки большой цитаты на страницу есть специальный семантический тег
Пример
Как пишется
Перед цитатой открываем тег
, а после цитаты его закрываем. Изи!
Важно помнить, что сам этот тег только показывает, где цитата находится. Внутри неё нужно разметить текст подходящими по смыслу тегами. Например, о теге абзаца
не стоит забывать. Цитата может быть длинной, состоять из нескольких абзацев.
Правило хорошего тона — указывать источник, откуда цитата была взята. Для этого есть два способа на выбор:
Атрибут cite
Атрибут cite указывается после имени тега в открывающей части. Пример:
Отдельный тег
Тег обычно указывается в конце цитаты. В него помещается либо название источника, либо ссылка на него, как в предыдущем примере. Визуально делает шрифт курсивным.
Да, у цитаты может быть свой футер, подвал. Именно в нём принято указывать автора цитаты.
В теге или в атрибуте cite указывается именно источник цитаты, а не её автор!
Атрибуты
Подсказки
💡 Сам по себе тег не размечает текст. Только показывает поисковым роботам и скринридерам, где на странице находится блок цитаты. Не забывайте про семантические теги для разметки текста внутри.
💡 При добавлении этого тега в разметку визуально ничего не изменится. Кавычки придётся добавлять самостоятельно 🙄
💡 В теге или атрибуте cite указывается ссылка на источник, а не автор.
💡 Это блочный элемент, обёрнутая в него цитата будет начинаться с новой строки.
На практике
Алёна Батицкая
🛠 Дизайнеры любят оформлять цитаты красивыми большими кавычками. Стоит помнить, что от одного лишь применения тега
эти самые кавычки не появятся. Нужно будет добавить их. Я обычно делаю это при помощи псевдоэлементов. Так разметка не засоряется лишними тегами, а внешний вид кавычек можно будет гибко менять через стили.
Цитирование в HTML
Дата публикации: 2020-01-16
От автора: слишком часто можно увидеть неправильный HTML-код, используемый для цитат в разметке. В этой статье давайте разберемся со всем этим, рассмотрим различные ситуации и разные HTML-теги для этих ситуаций.
В цитатах используются три основных элемента HTML:
blockquote
Теги blockquote используются для того, чтобы цитируемый текст отличался от остального содержимого. Мой учитель английского в десятом классе вложил мне в голову, что любая цитата из четырех или более строк должна быть выделена таким образом. Спецификация HTML не содержит такого требования, но когда текст является цитатой, и вы хотите, чтобы он был отделен от окружающего текста и тегов, blockquote является семантическим выбором.
По умолчанию браузеры вставляют отступы, добавляя поля с каждой стороны.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Как элемент потока (то есть элемент «уровня блока»), blockquote может содержать внутри другие элементы. Например, мы можем без проблем вставить абзацы:
Но это могут быть и другие элементы, такие как заголовок или неупорядоченный список:
Важно отметить, что blockquote должны использоваться только для цитат, а не как декоративный элемент в дизайне. Это также способствует доступности, поскольку пользователи программы чтения с экрана могут переходить между цитатами. Таким образом, элемент blockquote, используемый исключительно для эстетики, может действительно запутать этих пользователей. Если вам нужно что-то более декоративное, выходящее за пределы расширенных цитат, то, возможно, лучше использовать div с классом.
Теги q предназначены для встроенных цитат или, как сказал бы мой учитель в десятом классе, тех, что имеют меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки для цитат в качестве псевдо-элементов, но для старых браузеров может потребоваться резервное решение.