Тег q (от английского quotation, «цитата») отмечает короткую цитату внутри предложения: чужие слова, взятые из другого источника. Тег парный, закрывающий обязателен. Кавычки вокруг цитаты браузер добавляет сам, вручную их не записывают. Собственный атрибут у тега один, cite: адрес источника, читателю он не виден.
Ниже разобрано, что такое тег q в HTML, какие кавычки он выводит на разных языках, как задать свои и чем q отличается от blockquote.
<p>Как сказано в учебнике, <q>простая вёрстка надёжнее сложной</q>.</p>В этой статье
- Тег q в HTML: что это и для чего нужен
- Кавычки в теге q: почему их не нужно писать вручную
- Тег q и язык страницы: какие кавычки выберет браузер
- Вложенные цитаты в теге q: цитата внутри цитаты
- Свойство quotes: как задать свои кавычки для тега q
- Тег q или blockquote: как выбрать
- Тег q и cite: атрибут и название источника
- Частые ошибки с тегом q
Тег q в HTML: что это и для чего нужен
Тег q нужен для короткой цитаты, которая встроена в предложение и не занимает отдельного абзаца. Внутри него находится только процитированный текст. Браузер сам обводит его кавычками того вида, который подходит языку страницы.
Стандарт запрещает использовать q ради самих кавычек, например для иронии. Слова в кавычках без цитаты, названия и термины записывают иначе: название произведения отмечают тегом cite, а остальное обычными кавычками. Читать: раздел о q в WHATWG.
Кавычки в теге q: почему их не нужно писать вручную
Если записать кавычки самому, получится двойная пара: ««текст»». Стандарт требует, чтобы кавычек не было ни вокруг q, ни внутри него: их выводит браузер.
<p>Он сказал: <q>лишний div - лишний шум</q>.</p>У кавычек от q есть и вторая особенность: браузер рисует их как оформление, они не входят в текст страницы. Если выделить абзац и скопировать его (Ctrl + C), в буфер попадёт цитата без кавычек, а кавычки, записанные вручную, скопируются.
Пример: что попадёт в буфер обмена
Три способа записать одну цитату. Для каждой записи показаны разметка, вид на странице и то, что получится при копировании абзаца. Кавычки, которые выводит сам q, в копию не попадают, а записанные вручную попадают.
Тег q и язык страницы: какие кавычки выберет браузер
Вид кавычек зависит от языка, который браузер определил для окружения q. Язык задаёт атрибут lang у html или у любого окружающего элемента. Если атрибута нет нигде, браузер выводит английские кавычки “текст” даже вокруг русского текста.
Есть и неожиданная особенность: в Chrome атрибут lang на самом теге q вид кавычек не меняет, язык берётся у окружения. Так, <q lang="de"> внутри русского абзаца даёт русские кавычки, а <span lang="de"><q>текст</q></span> даёт немецкие. В других браузерах это может быть иначе, поэтому кадр ниже показывает, как поведёт себя именно ваш.
| Язык окружения | Внешняя цитата | Вложенная цитата |
|---|---|---|
| Русский, украинский | «текст» | „текст“ |
| Английский, испанский, язык не задан | “текст” | ‘текст’ |
| Немецкий | „текст“ | ‚текст‘ |
| Французский | «текст» | «текст» |
| Польский | „текст” | «текст» |
| Японский | 「текст」 | 『текст』 |
Таблица составлена по замеру в Chrome. Надёжнее всего задать язык страницы один раз в html: <html lang="ru">. Если для отдельного фрагмента нужен другой язык, запишите lang на окружающем его элементе.
Пример: какие кавычки выберет ваш браузер
Кнопки выбирают язык и место, где записан атрибут lang. Ниже видна разметка и цитата из трёх уровней так, как её выводит ваш браузер. В документе кадра язык не задан, поэтому вариант «без lang» показывает кавычки по умолчанию.
Вложенные цитаты в теге q: цитата внутри цитаты
Внутри q можно записать другой q: получится вложенная цитата, то есть цитата внутри цитаты. Для неё браузер сам выбирает второй вид кавычек: в русском языке это внешние «ёлочки» и внутренние „лапки“.
<p>Он сказал: <q>Учитель повторил: <q>лишний div - лишний шум</q>.</q></p>Третий уровень вложенности в Chrome повторяет вторую пару: «один „два „три““». Вкладывать больше двух уровней в обычном тексте не нужно, пример с тремя уровнями показан в кадре выше.
Свойство quotes: как задать свои кавычки для тега q
Вид кавычек задаёт CSS-свойство quotes. По умолчанию у него значение auto, то есть кавычки выбираются по языку. Свойству можно передать пары знаков: первая пара для внешней цитаты, вторая для вложенной. Значение none убирает кавычки.
q {
quotes: "«" "»" "„" "“";
}Правило действует на всех q сайта, поэтому его записывают один раз в общий CSS. Если lang задан верно, свойство quotes обычно не нужно. Убрать кавычки можно и правилом q::before, q::after { content: none; }. В курсивном окружении кавычки тоже курсивные: они рисуются как часть текста q.
Пример: набор кавычек для тега q
Кнопки меняют только правило CSS, цитата записана один раз. В блоке «Правило CSS» видно, что применено, ниже - вид цитаты в цитате и то, что получится при копировании: кавычек в копии нет при любом наборе.
Тег q или blockquote: как выбрать
Тег q строчный: цитата остаётся внутри предложения и переносится вместе с ним, а внутри допустимы только строчные теги. Тег blockquote блочный: цитата выделяется отдельно, отступом, и может состоять из нескольких абзацев. Выбирают по тому, как цитата связана с текстом, а не по числу знаков.
| Признак | q | blockquote |
|---|---|---|
| Вид | Строчный, внутри предложения | Блочный, отдельно от текста |
| Что внутри | Только строчные теги | Абзацы и другие блоки |
| Оформление | Кавычки выводит браузер | Отступ, кавычек нет |
| Название источника | Рядом, вне q | В figcaption, вне blockquote |
Про указание источника у blockquote написано на странице тега cite: где указать источник цитаты. Отдельный раздел урока курса: Блочная цитата: blockquote и cite.
Тег q и cite: атрибут и название источника
У q один собственный атрибут cite: адрес источника цитаты, он нужен программам. В проверке абзац с таким атрибутом остался той же высоты, а кавычки и вид не изменились: читатель адрес не видит. Название источника отмечают рядом тегом cite, вне q.
<p><q cite="https://example.com/rules">Кавычки записывает браузер</q> - написано в справочнике <cite>Правила вёрстки</cite>.</p>Подробно про атрибут и про элемент cite, включая имя автора, написано на странице тега cite.
Частые ошибки с тегом q
Почти все ошибки с этим тегом связаны с кавычками: их записывают вручную, не задают язык или ждут от них того, чего они не делают.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Кавычки записаны вручную рядом с q: «<q>текст</q>» | Получаются двойные кавычки: ««текст»» | Убрать ручные кавычки: их выводит браузер |
Кавычки записаны внутри тега: <q>«текст»</q> | Так же получаются двойные кавычки | Записать только текст цитаты |
q ради кавычек: <q>так называемый</q> эксперт | Тег обещает «это чужие слова из другого источника», а там ирония | Обычные кавычки без тега |
Текст русский, а lang нигде не задан | Браузер выводит английские кавычки “текст” | Записать <html lang="ru"> |
lang записан только на самом q | В Chrome вид кавычек не меняется: язык берётся у окружения | Записать lang на окружающем элементе или задать quotes |
Цитата из нескольких абзацев записана в q | Внутри q допустим только строчный контент, проверка разметки сообщает об ошибке | Тег blockquote |
| Ждут, что кавычки скопируются вместе с текстом | Кавычки от q не входят в текст страницы, в копии их нет | Учитывать это: в копии будет цитата без кавычек |
Атрибут cite у q считают видимым | Он читателю не виден, высота абзаца не меняется | Название источника записать видимым текстом рядом в cite |
