HTML тег <q>
Тег <q> — строчный элемент для коротких цитат. Описание тега, атрибуты и примеры использования.
Тег <q> — это строчный элемент, предназначенный для коротких цитат, которые вписываются в поток предложения и не занимают несколько строк. Главная особенность <q> состоит в том, что браузеры автоматически добавляют кавычки вокруг содержимого — вводить кавычки самостоятельно не нужно.
Для длинных самостоятельных цитат, которые образуют собственный абзац, используйте блочный элемент <blockquote>.
На этой странице рассматривается, когда применять <q>, чем он отличается от <blockquote>, атрибут cite, а также особенный для <q> способ настройки вставляемых кавычек с помощью CSS-свойства quotes.
Синтаксис
Тег <q> используется парно. Содержимое записывается между открывающим (<q>) и закрывающим (</q>) тегами.
Пример HTML-тега <q>:
HTML-тег <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Bernard Show says:
<q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q>
</p>
</body>
</html>Результат
<q> и <blockquote>
Оба элемента используются для оформления цитат, но служат разным целям:
<q> | <blockquote> | |
|---|---|---|
| Отображение | Строчный — вписывается в предложение | Блочный — отдельный блок с отступом |
| Длина | Короткие цитаты | Длинные самостоятельные цитаты |
| Кавычки | Браузер добавляет автоматически | Не добавляются; при необходимости добавляете сами |
Атрибут cite | Поддерживается (URL источника) | Поддерживается (URL источника) |
Используйте <q>, когда цитата находится внутри основного текста, и <blockquote>, когда она стоит отдельно. Не вводите кавычки внутри <q> — браузер добавит их сам, и при ручном вводе получатся двойные кавычки.
Пример использования <q> и <blockquote> вместе:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>As the proverb goes, <q cite="https://www.wikiquote.org/">He who can, does; he who cannot, teaches.</q></p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
"We're all mad here. I'm mad. You're mad," said the Cheshire Cat.
</blockquote>
</body>
</html>Обратите внимание: текст <q> отображается с кавычками, которые добавил браузер, а текст <blockquote> выводится как отдельный блок с отступом без каких-либо кавычек.
Атрибут cite и элемент <cite>
Эти два схожих по названию инструмента легко перепутать:
- Атрибут
cite(<q cite="...">) содержит машиночитаемый URL, указывающий на источник цитаты. Браузером он не отображается — он предназначен для поисковых систем, программ чтения с экрана и скриптов. - Элемент
<cite>— это видимый текст, используемый для разметки названия упоминаемого произведения (книги, песни, фильма, статьи). По умолчанию отображается курсивом.
Оба инструмента можно использовать вместе — атрибут cite для машиночитаемого источника, а видимый элемент <cite> для человекочитаемой ссылки:
<p>
<q cite="https://www.gutenberg.org/ebooks/11">We're all mad here.</q>
— <cite>Alice's Adventures in Wonderland</cite>
</p>Автоматические кавычки
Кавычки вокруг содержимого <q> не являются частью HTML — браузеры добавляют их через CSS, используя псевдоэлементы ::before и ::after вместе со значениями content: open-quote и content: close-quote. Таблица стилей пользовательского агента по умолчанию выглядит примерно так:
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}Изменение кавычек с помощью CSS-свойства quotes
Поскольку кавычки генерируются через open-quote/close-quote, наиболее специфичный для <q> способ их настройки — это CSS-свойство quotes. Оно позволяет задать нужные символы без изменения HTML:
<style>
q {
quotes: "«" "»";
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>Чтобы полностью убрать кавычки, установите quotes: none.
Вложенные элементы <q>
При вложении одного <q> в другой браузеры автоматически чередуют стили внешних и внутренних кавычек (например, двойные снаружи и одинарные внутри). Свойство quotes принимает вторую пару строк для вложенного уровня:
<style>
q {
quotes: '"' '"' "'" "'";
}
</style>
<p>
<q>The teacher said, <q>He who can, does.</q></q>
</p>Первая пара ('"' '"') задаёт стиль внешнего уровня, вторая ("'" "'") — вложенного.
Атрибут lang и кавычки для разных локалей
Кавычки различаются в зависимости от языка — в английском используются "…", во французском «… », в немецком „…". Браузеры выбирают правильные кавычки на основе языка элемента, поэтому установка атрибута lang на <q> (или родительском элементе) автоматически даёт корректные для локали кавычки:
<p lang="fr"><q>Bonjour le monde</q></p>
<p lang="de"><q>Hallo Welt</q></p>В контексте французского языка браузер отобразит гильеметы («… »), в контексте немецкого — нижние-верхние кавычки („…").
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| cite | URL | Машиночитаемый URL, указывающий на источник цитаты. Пользователю не отображается. |
| lang | language-code | Задаёт язык содержимого, который определяет соответствующие локали кавычки. |
Тег <q> также поддерживает глобальные атрибуты и атрибуты событий.
Как стилизовать HTML-тег <q>
Поскольку кавычки генерируются через open-quote/close-quote, наиболее специфичный для <q> инструмент стилизации — CSS-свойство quotes:
<style>
q {
quotes: "‹" "›";
font-weight: bold;
}
</style>
<p>He who can, <q>does</q>; he who cannot, teaches.</p>