HTML тег - q - определение и примеры использования
Меню
Веб-разработка
HTML тег q

HTML - тег <q> — это встроенный элемент, определяющий короткие цитаты, которые не занимают несколько строк.


Тег <q> - синтаксис и код

Тег <q> представлен парами. Содержимое записывается между открывающим (<q>) и закрывающим (</q>) тегами.

Пример разметки короткой цитаты:

<p><q>Наша миссия — сохранить биологическое разнообразие в гармонии человека и природы.</q></p>

"Наша миссия — сохранить биологическое разнообразие в гармонии человека и природы."


Определение и использование

  • HTML - тег <q> определяет короткую цитату;
  • Браузеры обычно заключают текст внутри тега <q> в кавычки, внешний вид которых зависит от кодировки HTML-документа и браузера;
  • Помимо определения кавычек, тег <q> также используется для определения слов или фраз, используемых в переносном смысле.
Рекомендация: для длинных цитат используйте тег <blockquote>.
Примечание: вы можете изменить дизайн кавычек с помощью стилей CSS.

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

Chrome Поддерживает
Yandex Browser Поддерживает
Edge Поддерживает
Firefox Поддерживает
Safari Поддерживает
Opera Поддерживает

Атрибуты

Атрибут Значение Описание
cite URL Указывает исходный URL цитаты 

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

Тег <q> также поддерживает глобальные атрибуты в HTML

Атрибуты событий

Тег <q> также поддерживает атрибуты событий в HTML


Дополнительные примеры

Используйте CSS для стилизации элемента <q>:

<!DOCTYPE html>
<html>
<head>
<style>
q {
  color: gray;
  font-style: italic;
}
</style>
</head>
<body>

<p>Цель WWF:
<q>Постройте будущее, в котором люди будут жить в гармонии с природой.</q>
Мы надеемся, что им это удастся.</p>

</body>
</html>

Элемент q + CSS

Цель WWF: Постройть будущее, в котором люди будут жить в гармонии с природой. Мы надеемся, что им это удастся.


Связанные страницы

Руководство по HTML: введение в HTML


Настройки CSS по умолчанию

Большинство браузеров отображают элемент q со следующими значениями по умолчанию:

q {
display: inline;
}

q:before {
content: open-quote;
}

q:after {
content: close-quote;
}


Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

 

Поделиться ссылкой