<q>

Оформляет цитату внутри абзаца.

Время чтения: меньше 5 мин

Кратко

Скопировано

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

Пример

Скопировано
        
          
          <p>  Великая актриса Фаина Раневская часто говорила:  <q>    Жизнь слишком коротка, чтобы тратить её на диеты, жадных мужчин и плохое    настроение.  </q></p>
          <p>
  Великая актриса Фаина Раневская часто говорила:
  <q>
    Жизнь слишком коротка, чтобы тратить её на диеты, жадных мужчин и плохое
    настроение.
  </q>
</p>

        
        
          
        
      

Как пишется

Скопировано

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

При этом тег добавляет кавычки вокруг цитируемой части предложения. Внешним видом кавычек можно управлять при помощи CSS-свойства quotes.

Атрибуты

Скопировано

К тегу можно добавить любые глобальные атрибуты, а также атрибут cite для указания источника цитаты. Напоминаем, что атрибут cite или тег <cite> нужны для указания ссылки на источник или его названия. ☝️ Не для указания имени человека, которого вы цитируете! Можете подробнее почитать в статье про <blockquote>

        
          
          <p>  Великая актриса Фаина Раневская часто говорила:  <q cite="https://www.soyuz.ru/articles/889">    Жизнь слишком коротка, чтобы тратить её на диеты, жадных мужчин и плохое    настроение.  </q></p>
          <p>
  Великая актриса Фаина Раневская часто говорила:
  <q cite="https://www.soyuz.ru/articles/889">
    Жизнь слишком коротка, чтобы тратить её на диеты, жадных мужчин и плохое
    настроение.
  </q>
</p>

        
        
          
        
      

Подсказки

Скопировано

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

💡 Вокруг цитируемого текста добавляются кавычки. Вид кавычек зависит от языка документа, указанного в атрибуте lang. Вы можете изменить внешний вид кавычек при помощи CSS-свойства quotes.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

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

        
          
          <p>  В Японии принято обозначать звук, произносимый кошкой как  <q lang="ja-latn">nyan</q></p>
          <p>
  В Японии принято обозначать звук, произносимый кошкой как
  <q lang="ja-latn">nyan</q>
</p>

        
        
          
        
      
Открыть демо в новой вкладке

Обратите внимание, что кавычки в этом примере отличаются от стандартных, они соответствуют тем кавычкам, которые ставятся в латинизированном японском тексте.