HTML тег <q>

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

Описание

Существует множество случаев, когда в тексте используются двойные кавычки, но в случае применения HTML тега <q> (quote), это означает, что используется именно цитата. Он является строчным элементом и определяет короткие цитаты в HTML-документе, то есть определяет текст цитаты непосредственно в тексте.

Другими словами, вы должны указать браузеру, что хотите добавить именно цитату. Если вы просто поставите двойные кавычки, то браузер поймет, что есть абзац текста с парой двойных кавычек в нем. А если использовать тег <q>, то браузер интерпретирует часть этого текста как реальную цитату.

И вот теперь, когда браузер знает, что это цитата, он может отобразить ее наилучшим из возможных способов. Некоторые браузеры отобразят двойные кавычки вокруг текста, некоторые не отобразят, а в отдельных случаях могут использоваться и другие методы. Кроме того, не забывайте о мобильных устройствах и речевых браузерах для людей с плохим зрением. Этот тег полезен и в других ситуациях, например при работе поисковых систем, просматривающих Сеть и выбирающих страницы с цитатами. Структура и значение в ваших страницах - очень важные вещи.

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

Примечание: для выделения длинных цитат, занимающих несколько строк или целый абзац, используется тег blockquote.

Атрибуты

cite:

Указывает URL-адрес документа, откуда была взята цитата. Атрибут не имеет визуального эффекта в обычных браузерах, но может быть использован программами чтения с экрана.

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

Стиль по умолчанию

q {
    display: inline;
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
} 

Пример

<p>Лещинский Ежи:
<q>Бери пример со старших, пока они ведут себя примерно</q>.</p> 

Результат данного примера в окне браузера: