Клавиша / esc

<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>

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