Тег <q>

Описание

Тег <q> (от англ. "quotation") предназначен для выделения коротких цитат в тексте. В отличие от <blockquote>, используется для встроенных цитат, не требующих отдельного абзаца. Браузеры автоматически добавляют кавычки вокруг содержимого.

Базовый синтаксис:
<p>Как сказал Эйнштейн: <q>Безумие — делать одно и то же и ожидать разных результатов</q>.</p>
Пример с атрибутом cite:
<q cite="https://example.com/source">Точная цитата из источника</q>

Ключевые особенности:

  • Автоматическое добавление кавычек (зависит от языка документа)
  • Семантическое выделение цитат (важно для SEO и доступности)
  • Подходит для коротких цитат (обычно не более 1-2 предложений)
  • Кавычки можно стилизовать через CSS (::before и ::after)
  • Поддерживается всеми современными браузерами
Пример стилизации:
<style> q { font-style: italic; color: #555; } q::before { content: "«"; color: #e74c3c; } q::after { content: "»"; color: #e74c3c; } /* Для английского языка */ :lang(en) q::before { content: "“"; } :lang(en) q::after { content: "”"; } </style> <p>Философ заметил: <q>Мыслю, следовательно существую</q>.</p>

Рекомендации по использованию:

  • Используйте для коротких встроенных цитат
  • Для длинных цитат применяйте <blockquote>
  • Указывайте атрибут cite для ссылки на источник
  • Не используйте просто для выделения текста кавычками
  • Сочетайте с <cite> для указания автора
Пример с указанием автора:
<p> <q>Знание — сила</q>, <cite>Фрэнсис Бэкон</cite>. </p>

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

Атрибуты

cite URL источника цитаты
accesskey Горячая клавиша для активации
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
spellcheck Проверка орфографии
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода

Поддержка браузерами
8.0 1.0 7.0 1.0 2.0