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

Синтаксис тега <q>

<q>Текст цитаты</q>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

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

Примеры использования

Этот код выведет в браузере текст: Как сказал Альберт Эйнштейн, «Воображение важнее знания».

<p>Как сказал Альберт Эйнштейн, <q>Воображение важнее знания</q>.</p>

В этом примере мы используем тег <q> для выделения фразы Леса Брауна:

<blockquote>
  <p>Мы все становимся гениальными, когда начинаем работать над своими слабостями.</p>
  <footer>— Лес Браун</footer>
</blockquote>

<p>Как говорил Лес Браун, <q>Мы все становимся гениальными, когда начинаем работать над своими слабостями</q>.</p>

Для чего использовать тег <q>

  • Оформление цитат на веб-страницах.
  • Оформление текста при создании электронных книг.
  • Оформление комментариев в блогах и форумах.
  • Оформление описаний товаров на интернет-магазинах.
  • Оформление текста при создании инструкций.
  • Оформление текста при создании статей и научных публикаций.
  • Оформление текста при создании резюме и CV.

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

У тега один атрибут — cite, он указывает источник цитаты.

<q cite="https://ru.wikipedia.org/">Википедия</q>

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <q> не должен использоваться для выделения обычного текста или заголовков. Он может использоваться только для выделения цитат.

Нюансы

  • Если нужно указать длинную цитату, то можно использовать тег <blockquote>.
  • Если нужно указать автора цитаты, то можно использовать тег <cite>.
  • При оформлении цитаты не следует использовать кавычки-лапки, так как это может привести к неправильному отображению на разных устройствах.

Поддержка браузерами

Тег <q>поддерживается всеми современными браузерами.

Альтернативные теги

Если необходимо оформить длинную цитату, то вместо тега <q> следует использовать тег <blockquote>. Если цитата является частью более крупного текста, то ее можно выделить тегом <cite>.

Чем заменить тег

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

Актуальность

Тег <q> не устарел и может использоваться в веб-разработке.


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<ul>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

Справочник
  • 25 января 2023