В HTML для оформления цитат предназначены три элемента:
<q>— короткая строчная цитата внутри абзаца. Кавычки добавляются браузером автоматически.<blockquote>— блочная цитата, отдельный абзац или несколько абзацев чужого текста.<cite>— указание источника: название произведения, имя автора, ссылка на оригинал.
Эти элементы несут семантическую нагрузку. Использовать их нужно не для визуального оформления (для этого есть CSS), а для передачи смысла: «это чужой текст» или «это источник информации».
<q> — короткая цитата в строке
Элемент <q> предназначен для цитат, которые помещаются внутри абзаца и не требуют выделения в отдельный блок.
Как работает
<p>Альберт Эйнштейн говорил: <q>Воображение важнее знания</q>.</p>
Браузер автоматически обернёт содержимое в кавычки. Писать кавычки вручную внутри <q> не нужно — получатся двойные.
Зависимость кавычек от языка
Тип кавычек определяется атрибутом lang ближайшего родительского элемента:
<html lang="ru"> <p>Он сказал: <q>Привет</q>.</p> </html>
Результат: Он сказал: «Привет».
<html lang="en"> <p>He said: <q>Hello</q>.</p> </html>
Результат: He said: «Hello».
Для русского языка браузеры используют «ёлочки» (Unicode U+00AB и U+00BB), для английского — двойные прямые кавычки (U+0022). Если на странице смешаны языки, задавайте lang для каждого фрагмента:
<p>Он написал: <q lang="en">Hello, world</q>.</p>
Английская цитата будет оформлена английскими кавычками, даже если язык страницы — русский.
Атрибут cite
У элемента <q> есть атрибут cite, в который помещается URL источника:
<p>По мнению Эйнштейна, <q cite="https://example.com/einstein-quotes">воображение важнее знания</q>.</p>
Значение не отображается визуально и недоступно пользователю через интерфейс браузера. Оно используется поисковыми системами и может извлекаться скриптами. Атрибут cite содержит только URL — не имя автора и не название книги.
Когда не использовать
<q> не подходит для цитат, которые превышают одно предложение или требуют отдельного абзаца. Для длинных цитат используется <blockquote>.
Не следует использовать <q> для оформления метафор, иронии или выделения терминов — это не цитаты. Для терминов есть <dfn>, для emphasis — <em>, для стилистического выделения — <i> или <span>.
<blockquote> — блочная цитата
Элемент для цитат, которые выделяются в отдельный блок: один или несколько абзацев, списки, фрагменты кода.
Базовое использование
<blockquote> <p>Любой достаточно совершённый технологический процесс неотличим от магии.</p> </blockquote>
Браузер по умолчанию отображает <blockquote> с отступами слева (и иногда справа). Визуальное оформление можно переопределить через CSS.
Многоабзацная цитата
<blockquote> <p>Первый абзац цитаты.</p> <p>Второй абзац цитаты.</p> <p>Третий абзац цитаты.</p> </blockquote>
Внутри <blockquote> обязательно должен быть семантический контейнер: <p>, <ul>, <ol> и т. д. Прямой текст без обёртки допустим спецификацией, но нарушает правила структурирования контента — текст должен быть сгруппирован в абзацы.
Цитата с источником
Источник можно указать двумя способами.
Способ 1 — атрибут cite с URL:
<blockquote cite="https://example.com/arthur-clarke"> <p>Любой достаточно совершённый технологический процесс неотличим от магии.</p> </blockquote>
Как и у <q>, значение атрибута cite не отображается и не доступно пользователю через браузерный интерфейс.
Способ 2 — элемент <cite> внутри или после цитаты:
<blockquote> <p>Любой достаточно совершённый технологический процесс неотличим от магии.</p> <footer>— <cite>Артур Кларк</cite>, «Profiles of the Future»</footer> </footer> </blockquote>
Это второй способ — и он предпочтителен, потому что источник виден пользователю.
Комбинация обоих способов
<blockquote cite="https://example.com/arthur-clarke"> <p>Любой достаточно совершённый технологический процесс неотличим от магии.</p> <footer>— <cite><a href="https://example.com/arthur-clarke">Артур Кларк</a></cite>, «Profiles of the Future»</footer> </blockquote>
Атрибут cite содержит URL для машинной обработки, элемент <cite> с ссылкой — для человека.
Вложенность
<blockquote> можно вкладывать друг в друга:
blockquote> <p>В своей статье автор пишет:</p> <blockquote> <p>Цитата внутри цитаты.</p> </blockquote> <p>И далее продолжает рассуждение.</p> </blockquote>
Когда не использовать
<blockquote> не предназначен для визуального выделения любого текста с отступом. Если это не чужой текст, а ваш собственный комментарий, заметка или врезка — используйте <aside>, <section> или <div> с CSS-оформлением.
Не используйте <blockquote> для оформления диалогов. Для диалогов есть элемент <dialog>, а в текстовом формате — просто абзацы с указанием говорящего.
<cite> — указание источника
Элемент <cite> обозначает название произведения, из которого взята цитата, или источник ссылки. Может использоваться как внутри <blockquote> и <q>, так и самостоятельно.
Что ставить внутри <cite>
Согласно спецификации HTML, <cite> должен содержать название произведения — книги, статьи, фильма, песни, отчёта, документа. Имя автора не является названием произведения и по строгой интерпретации спецификации не должно помещаться в <cite>.
Корректно:
<p>Как сказано в книге <cite>Преступление и наказание</cite>, ...</p>
<blockquote> <p>...</p> <footer>— <cite>Profiles of the Future</cite>, с. 14</footer> </blockquote>
Спорный момент — имя автора:
<!-- Допустимо, но не по строгой спецификации --> <p>По словам <cite>Достоевского</cite>, ...</p> <!-- Строго по спецификации --> <p>По словам Достоевского в романе <cite>Преступление и наказание</cite>, ...</p>
На практике многие сайты помещают в <cite> имя автора. Спецификация это не запрещает явно, но рекомендует использовать элемент для названия произведения. В HTML 5.2 и HTML 5.3 уточнено: <cite> применяется к названию произведения, включая «творческое произведение» в широком смысле.
Ссылка внутри <cite>
Если источник доступен по ссылке, её можно обернуть в <cite> или поместить ссылку внутри <cite>:
<p>Подробное описание метода см. в статье <cite><a href="https://example.com/article">Метод конечных элементов</a></cite>.</p>
<p>Подробное описание метода см. в <a href="https://example.com/article"><cite>Метод конечных элементов</cite></a>.</p>
Оба варианта допустимы. Первый — элемент <cite> внутри ссылки — встречается чаще и логичнее: название произведения семантически обёрнуто, а ссылка ведёт на него.
<cite> вне цитаты
Элемент можно использовать и без <blockquote> или <q>, просто для указания источника:
<p>Эти данные приведены в <cite>ГОСТ Р 51794-2008</cite>.</p>
<p>Согласно <cite><a href="https://example.com/report-2024">Отчёту за 2024 год</a></cite>, продажи выросли на 12%.</p>
Визуальное оформление
Браузеры по умолчанию отображают <cite> курсивом. Это можно переопределить:
cite { font-style: normal; font-weight: 500; color: #555; }
Распространённые ошибки
Ручные кавычки внутри <q>. Браузер уже добавляет кавычки. Если написать <q>«текст»</q>, получатся двойные кавычки: ««текст»».
Использование blockquote для декоративного отступа. Если текст не является цитатой, <blockquote> применён неправильно. Для визуального отступа есть CSS margin и padding.
Текст без обёртки внутри <blockquote>. Содержимое должно быть сгруппировано в абзацы, списки или другие семантические элементы:
<!-- Неправильно --> <blockquote>Какой-то текст.</blockquote> <!-- Правильно --> <blockquote> <p>Какой-то текст.</p> </blockquote>
Атрибут cite вместо элемента <cite>. Атрибут cite принимает только URL и не отображается. Если нужно показать источник читателю — используйте элемент <cite> и/или ссылку <a>.
<cite> для имени автора как единственного содержимого. По строгой спецификации <cite> — название произведения, а не имя. На практике нарушение не критично, но если есть возможность — указывайте название, а автора — рядом.
Кнопки «копировать» внутри <blockquote>. Внутри <blockquote> не должно быть интерактивных элементов, не относящихся к цитате. Кнопка «копировать» — это элемент интерфейса, а не часть цитаты. Размещайте его снаружи, через <figure> или <div>.
Сводная таблица
| Элемент | Тип | Назначение | Кавычки | Отображение по умолчанию |
|---|---|---|---|---|
<q> |
Строчный | Короткая цитата в строке | Добавляются браузером | Кавычки по локали |
<blockquote> |
Блочный | Цитата отдельным блоком | Не добавляются | Отступы слева/справа |
<cite> |
Строчный | Название источника | Не добавляет | Курсив |
| Атрибут | Где применяется | Значение | Видимость |
|---|---|---|---|
cite |
<q>, <blockquote> |
URL источника | Не отображается |
lang |
Любой элемент | Код языка (BCP 47) | Влияет на кавычки <q> |
Паттерн: цитата с видимым источником и ссылкой
Полный пример, объединяющий все три элемента:
<blockquote cite="https://example.com/clarke-profiles"> <p>Любой достаточно совершённый технологический процесс неотличим от магии.</p> <footer> — <cite><a href="https://example.com/clarke-profiles"> Артур Кларк, «Profiles of the Future» </a></cite> </footer> </blockquote>
Что здесь сделано:
<blockquote>обозначает цитату как отдельный блок.- Атрибут
citeхранит URL для машинной обработки. <cite>внутри<footer>указывает источник, видимый читателю.<a>ведёт на оригинал.<footer>семантически отделяет источник от текста цитаты.
Это максимально корректная разметка по спецификации HTML.
Загрузка...