HTML-тег <q>

HTML-тег <q> используется для определения коротких встроенных цитат. Обычно он отображается с кавычками вокруг содержимого. В отличие от тега <blockquote> , который используется для более длинных блочных цитат, тег <q> предназначен для использования внутри абзаца или предложения.

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

Базовый синтаксис HTML-тега <q>

Базовая структура тега <q> : 

<q>This is a short quotation.</q>

Браузер автоматически отобразит кавычки вокруг текста, заключенного в тег <q> .

Пример использования тега <q>

Вот пример встроенной цитаты в предложении: 

<!DOCTYPE html>
<html>
    <body>
        <p>Albert Einstein once said, <q>Imagination is more important than knowledge.</q></p>
    </body>
</html>

Пояснение: Тег <q> оборачивает цитируемый текст, и браузер отображает его в кавычках по умолчанию.

Стилизация тега <q> с помощью CSS

Вы можете настроить внешний вид тега <q> и управлять отображением кавычек с помощью CSS: 

<!DOCTYPE html>
<html>
    <head>
        <style>
            q {
                quotes: "«" "»"; /* Use custom quotation marks */
                color: #007BFF;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <p>Albert Einstein once said, <q>Imagination is more important than knowledge.</q></p>
    </body>
</html>

Результат: цитата оформлена синим текстом, курсивом и пользовательскими кавычками(« »).

Атрибуты HTML-тега <q>

  • cite: Указывает URL-адрес источника цитаты. Этот атрибут предоставляет контекст, но не отображается пользователю.
  • Глобальные атрибуты: поддерживает все глобальные атрибуты, такие как id , class и style .

Например, вы можете включить атрибут cite для ссылки на источник цитаты: 

<p>Albert Einstein once said, <q cite="https://example.com/einstein-quotes">Imagination is more important than knowledge.</q></p>

Примечание: Хотя атрибут cite добавляет семантическое значение, его содержимое по умолчанию не отображается. При необходимости разработчики могут отобразить его с помощью JavaScript или CSS.

Разница между тегами <q> и <blockquote>

  • <q>: Используется для коротких встроенных цитат. Автоматически заключает текст в кавычки.
  • <blockquote>: используется для длинных цитат на уровне блока. Обычно добавляет отступ, но по умолчанию кавычки не добавляются.

Практическое применение тега <q>

  • Встроенные цитаты: отображайте короткие цитаты непосредственно в тексте или абзацах.
  • Атрибуция цитат: используйте атрибут cite для ссылки на источник цитат.
  • Стилизованные кавычки: объедините тег <q> с CSS для создания кавычек собственного дизайна.
  • Доступный контент: семантически маркируйте цитаты, чтобы улучшить доступность для программ чтения с экрана.