Значок цитаты в html

Обновлено: 22.12.2024

Добавьте эту страницу в закладки браузера, чтобы всегда была "под рукой".
Для добавления в закладки нажмите здесь или нажмите Ctrl+D.

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

Атрибут cite

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

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

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

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

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

Для диалогов не должны использоваться ни <blockquote>, ни <q>, ни <cite>. В остальном диалог можно оформлять как угодно, для этого нет прописанного семантического способа. То есть, спецификация предлагает элементы <p> и знаки пунктуации, а также <span> или <b> для обозначения говорящего.

Следующая цитата

Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.

Элемент <cite>

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

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

По умолчанию браузеры выделяют элемент cite курсивом. Сам элемент не привязан к элементами <q> или <blockquote>, так что их может вообще не быть. Если вы хотите упомянуть какое-нибудь произведение и выделить название, поместите его в элемент <cite>. Семантические божества будут довольны, что вы не использовали элементы <i> или <em>.

Но куда вставить элемент <cite>, если хочешь указать источник цитаты? Внутри блока цитаты? Снаружи? Если мы поместим его внутри <blockquote> или <q>, этот элемент станет частью цитаты. По этой причине такое расположение запрещено спецификацией.

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

А как насчет элемента <figure>?

Все же есть один способ подписать цитату так, чтобы семантические божества были довольны: вы можете поместить элемент <blockquote> внутрь элемента <figure>. А следом можно поместить имя автора и источник (окруженный тегами <cite>) в элемент <figcaption>.

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

  1. Это семантически правильное использование всех четырех элементов.
  2. Это позволяет и включить имя автора, и отделить его от названия произведения.
  3. Вы получаете простой способ оформить цитату без всяких <div> и <span>.

Элемент <blockquote>

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

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

Как блочный элемент, <blockquote> может содержать внутри себя другие элементы. Например, мы без проблем можем разбить цитату на абзацы:

Но дело не ограничивается абзацами! Внутри блока <blockquote> могут быть и заголовки, и списки:

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

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

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

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

Обычные кавычки в тексте так же валидны для встроенных в предложения цитат, как и элемент <q>. Но использование <q> имеет преимущества, поскольку у этого элемента есть атрибут cite, автоматическая вставка кавычек и автоматическое управление уровнями цитирования. Элементы <q> не следует использовать для обозначения саркастических замечаний и воображаемых кавычек, при разговоре передаваемых жестами. Но если вы знаете, как правильно выделить воображаемые кавычки, расскажите и мне, пожалуйста.

Следующая цитата

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

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

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

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

Вложенность цитирования не ограничена. Вложенные элементы <q> могут быть даже внутри блока <blockquote>, находящегося внутри другого блока <blockquote>.

Если вы добавляете кавычки к цитате, оформленной с помощью элемента <blockquote>, не забывайте, что в нем не предусмотрена автоматическая смена кавычек в зависимости от уровня цитирования (как в <q>). Если вы хотите иметь кавычки внутри <blockquote>, возможно, нужно добавить правило для комбинированного селектора, чтобы элементы <q> внутри <blockquote> выделялись одинарными кавычками (или двойными, если вы следуете британскому соглашению).

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

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

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

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

Следующая цитата

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

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

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

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

  • <blockquote>
  • <q>
  • <cite>

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

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

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

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

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

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

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

Исходя из того, что я читал, у скринридеров не должно быть проблем с распознаванием семантически правильно использованных тегов <q>, <blockquote> и <cite>.

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

Я не очень представляю, зачем вам это может понадобиться, но тем не менее. Кавычки, добавляемые к цитате, окруженной тегами <q>, добавляют псевдоэлементы в таблицу стилей, так что их можно оформить как угодно, включая добавление анимации.

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

Читайте также: