Q тег: Тег q, встроенная цитата — Разметка текста — HTML Academy
Содержание
Тег | HTML справочник
Поддержка браузерами
Описание
Существует множество случаев, когда в тексте используются двойные кавычки, но в случае применения 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>
Результат данного примера в окне браузера:
Использование кавычек, цитат и тега q
От автора: при правильном использовании часто игнорируемых, а с другой стороны часто злоупотребляемых тегов <blockquote>, <cite> и <q> можно создавать по-настоящему семантически и типографски богатые страницы.
Главная идея, которую стоит держать в голове, в том, что эти элементы используются для разграничения слов или цитат в общем контенте страницы, но не относящихся к контексту. Вот почему теги <blockquote>, <cite> и <q> почти всегда содержат контент от других людей.
Цитата
Тег <blockquote> это блочный элемент и несет в себе развернутую цитату. К примеру:
<blockquote>
Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею
</blockquote>
<blockquote> Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею </blockquote> |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Тут стоит отметить пару вещей:
Тег <blockquote> не создает автоматически кавычки вокруг цитаты: если это необходимо, вам придется добавить их самому или как символы, или как спецсимволы HTML, или как генерируемый контент.
По умолчанию тег цитаты отталкивает слегка текст от левого и правого краев. По этой причине его часто используют для отступов. Говорить о том, что лучше так не делать вовсе излишне: если вам нужно подвинуть элемент просто добавьте к нему margin-left в CSS, а не тег <blockquote>.
Тег цитаты используется для цитирования текста, который уже есть на странице в форме ярко оформленных цитат.
Обычно перед применением <blockquote> текст оборачивается в тег <p>. В HTML5 уже можно цитировать и без тега параграфа, но практика пока что сохраняется (смотрите ниже).
Кроме того
Тег цитаты по умолчанию не ссылается на основной источник. Это можно сделать разными способами: первый это атрибут <cite>.
<blockquote cite=»//archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt»>
Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею
</blockquote>
<blockquote cite=»//archive.org/stream/westernphilosoph035502mbp/westernphilosoph035502mbp_djvu.txt»> Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею </blockquote> |
Но к несчастью, ни один известный мне браузер на сейчас не использует этот атрибут. Как альтернатива атрибуту cite, сослаться на источник можно, добавив тег <footer> и/или тег <cite> внутри цитаты <blockquote>:
<blockquote>
<p>Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.</p>
<footer>
<p>- Бертран Рассел, История западной философии</p>
</footer>
</blockquote>
<blockquote> <p>Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.</p> <footer> <p>- Бертран Рассел, История западной философии</p> </footer> </blockquote> |
Обычно название книги или имя автора помещается в ссылку. Это делается для того, чтобы читатель мог найти больше информации об авторе.
Тег q
Предназначен для коротких цитат внутри предложений. К примеру:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
<p>As Voltaire said: <q>Every man is a creature of the age in which he lives
and few are able to raise themselves above the ideas of the time.</q>
<p>As Voltaire said: <q>Every man is a creature of the age in which he lives and few are able to raise themselves above the ideas of the time.</q> |
Пару замечаний: Тег <q> автоматически создает открывающие и закрывающие одинарные скобки для текста на английском языке. В других языках используются другие знаки, не все из них поддерживаются всеми браузерами. К примеру, цитата на немецком:
<html lang=»de»>
<p>Wie Goethe sagte: <q>Man sieht nur das, was man weiß.</q>
<html lang=»de»> <p>Wie Goethe sagte: <q>Man sieht nur das, was man weiß.</q> |
Цитата должна отобразиться с немецкими кавычками: «Man sieht nur das, was man weiß». В современных Webkit браузерах проблемы с этим не возникает, а вот в Firefox они есть. В Firefox можно пофиксить с помощью CSS:
:lang(de) > q { quotes: «„» «“» «‚» «‘» }
:lang(de) > q { quotes: «„» «“» «‚» «‘» } |
В википедии можно найти кавычки для других языков. Огромная благодарность Gunnar Bittersmann, что заметили одно исключение. Два замечания:
Важно понять, что тег <q> предназначен для цитирования сторонних источников, а не для выделения части текста или фразы на той же странице.
Как и с тегом <blockquote> к элементу <q> можно добавить атрибут cite, чтобы указать ссылку на источник.
Тег Cite
Крайне смутная информация в HTML об элементе cite, который одновременно является тегом и атрибутом. В качестве тега его используют для ссылки на какую-либо работу: книга, кино, телевизионное шоу, сценическая постановка, музыкальный альбом или программное обеспечение. Чтобы дополнить статью информацией, тег <cite> можно использовать вместе с микроданными.
<p>Like many thick tomes, <cite>Atlas Shrugged</cite> exists on the
shelf of most readers as a book to be bragged about, rather than one to
be read or analysed.
<p>Like many thick tomes, <cite>Atlas Shrugged</cite> exists on the shelf of most readers as a book to be bragged about, rather than one to be read or analysed. |
Визуально тег <cite> делает текст курсивным, хотя и не должен для этого использоваться вовсе (для этого есть <em> или <i>). <cite> содержит название работы, автора, ссылку (ссылка именно видна в отличие от href). В первом нашем примере <cite> можно использовать так:
<blockquote>
<p>“ Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.”</p>
<footer>
<p>― Бертран Рассел,
<cite>История западной философии</cite></p>
</footer>
</blockquote>
<blockquote> <p>“ Учить тому, как жить без уверенности и в то же время не быть парализованным нерешительностью, – это, пожалуй, главное, что может сделать философия в наш век для тех, кто занимается ею.”</p> <footer> <p>― Бертран Рассел, <cite>История западной философии</cite></p> </footer> </blockquote> |
Заключение
Теги <blockquote>, <cite> и <q> крайне полезны… особенно если их использовать по назначению. В паре с другими тегами HTML, используемых для редактирования текста, вы получаете в свою копилку полный и очень богатый набор инструментов.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
| Справочник HTML
Элемент <q> (от англ. «quotation» ‒ «цитата, высказывание») определяет внутри документа короткую цитату, объём которой не должен превышать больше одного абзаца. Причем он может использоваться не только для выделения цитат, но и для слов или выражений, которые имеют переносный смысл. Браузеры автоматически заключают текст расположенный внутри элемента <q> в кавычки. Внешний вид кавычек зависит от браузера и кодировки HTML-страницы, изменить его можно при помощи стилей (CSS).
Примечание: Для использования длинных цитат в документе, существует специальный блочный HTML элемент <blockquote>.
Синтаксис
<q>Текст</q>Закрывающий тег
Обязателен.
Атрибуты
- cite
- Указывает URL адрес ресурса/документа, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <q> со следующими значениями CSS по умолчанию:
q {
display: inline;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}Различия между HTML 4.01 и HTML5
Нет.
Пример использования:
Заранее отформатированный текст:
Пример HTML:
Попробуй сам
<p>Как сказал А. А. Милн, <q>некоторые люди говорят с животными.</q><p>Спецификации
Поддержка браузерами
| Элемент | ||||||
| <q> | 8+ | 1+ | 3.5+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <q> | 1+ | 1+ | 6+ | 1+ |
Попробуйте сами — Примеры
Как создать длинную и короткую цитату:
Длинные и короткие цитаты
Как выделить аббревиатуру:
Аббревиатура
Как указать контактную информацию, адрес или телефон:
Адрес
Как оформить ссылку на первоисточник:
Источники и определения
Учебник HTML
HTML уроки: HTML Цитаты
HTML уроки: HTML Элементы
seodon.ru | Теги HTML — Тег Q
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <Q> применяется для выделения текста в кавычках. Причем он может использоваться не только для выделения цитат, но, например, для слов или выражений, которые имеют переносный смысл. Браузеры автоматически заключают текст расположенный внутри элемента <Q> в кавычки, поэтому самостоятельно их проставлять не нужно. Внешний вид кавычек зависит от браузера и кодировки HTML-страницы, изменить его можно при помощи стилей (CSS).
Атрибуты
Личные атрибуты: нет.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: текст (строки).
Модель тега: inline (встроенный, уровня строки).
Может содержать: inline-теги, обычный текст и спецсимволы HTML (мнемоники).
Открывающий тег: необходим. Закрывающий тег: необходим.
Синтаксис
<q>содержимое</q>Пример HTML: применение тега Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега Q</title>
</head>
<body>
<p>Он стоял и смотрел — <q>как воды в рот набрав</q>,<br>
Говорить что-то поздно — <q>поезд ушел</q>.<br>
А еще понимал, что <q>рыльце в пуху</q><br>
И что зря он вчера к соседке зашел.</p>
<p>Евгений Тарадаев.</p>
</body>
</html>Результат примера
Результат. Применение тега Q.
Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 и 7.0 | 8.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
Internet Explorer 6.0 и 7.0 поддерживает тег <Q> (например, к нему можно применить стили), но не отображает кавычки.
| HTML | WebReference
Элемент <q> (от англ. quotation — цитата, кавычки) используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
Закрывающий тег
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset=»utf-8″>
<title>Q</title>
<style>
q {
font-style: italic; /* Курсивное начертание текста */
color: #008; /* Цвет текста */
}
</style>
</head>
<body>
<p>Станислав Лец утверждал: <q>Чаще всего выход там, где был
вход</q>.</p>
</body>
</html>
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью <q>
В каждом языке существуют свои традиции для обозначения кавычек, в русской типографике, например, применяются кавычки вида «…» или „…“. Для изменения типа кавычек используется стилевое свойство quotes.
Примечание
Браузер Internet Explorer до версии 7 включительно кавычки не ставит. Остальные браузеры кавычки добавляют корректно.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 09.10.2018
Редакторы: Влад Мержевич
Тег blockquote в HTML. Различия с cite и q. Применение CSS border.
Что делает тег blockquote в HTML?
Элементом <blockquote> определяют часть текста, которая является прямой цитатой. В то же время элемент <quote> следует использовать, когда цитата представляется встроенным в окружающий текст. Но когда цитата представляется в виде отдельного абзаца, то тег <blockquote> является более подходящим элементом.
При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы <blockquote>отделить цитируемый текст</blockquote> от окружающего текста.
Стилизация элемента blockquote
Ваш стиль применения <blockquote> зависит от вашего конкретного дизайна сайта, но есть несколько вещей, которые стали довольно распространенной практикой. Вам не обязательно следовать за ними, но вы можете обнаружить, что это полезно. Наиболее распространенной практикой для стилизации <blockquote> является отступ с помощью CSS margin. Обычно это применяется только для левой стороны выделяемого контента, однако в полностью выровненном тексте может быть полезно разместить поля с обеих сторон цитаты.
justified { text-align: justify; } blockquote { margin: 0 45px; }
<div>
<p>При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы</p>
<blockquote>
отделить цитируемый текст
</blockquote>
<p>от окружающего текста.</p>
</div>
Другой очень распространенный шаблон стиля — это разместить вертикальную линию или границу вдоль левого края цитаты. Обычно содержимое <blockquote> выставляется в соответствии с краем текста, что требует использования padding вместо margin для достижения правильного отступа. CSS border находятся внутри margin и за пределами padding. Вы также можете установить левое поле (margin) на 0, чтобы переопределить поле по умолчанию. Это хорошо работает независимо от того, оправдан ли текст.
blockquote { padding: 0 45px; margin-left: 0; border-left: 2px solid gray; }
<p>При цитировании более чем нескольких слов в документе необходимо использовать тег blockquote, чтобы</p>
<blockquote>
отделить цитируемый текст
</blockquote>
<p>от окружающего текста.</p>ружающего текста.
Использование тега <cite> вместо <blockquote>
Некоторые программисты рекомендуют использовать элемент <cite> для определения источника цитаты. Однако это не разрешено в соответствии со стандартом HTML5. Есть некоторые разногласия относительно того, что именно должен содержать элемент <cite>, но и W3C, и WHATWG согласны с тем, что этот элемент не следует использовать для цитат. Элемент <cite> должен использоваться для идентификации названия произведения, а не его автора или источника произвольной цитаты.
Использование тега cite <blockquote> Вы должны использовать элемент cite для определения источника цитаты. — <cite>Some People</cite> </blockquote>
Хотя рекомендация W3C для HTML5 гласит, что элемент <cite> может включать имя автора (вместе с заголовком), лучше всего следовать стандарту WHATWG и использовать его только для названия произведения.
Элемент <q>
Почти все знают и используют элемент <blockquote>, но очень немногие составители HTML-документов знают или используют элемент <q>, который представляет собой встроенную цитату. Поскольку знаки препинания в разных регионах различны, вы можете рассмотреть возможность использования тега <q> в качестве альтернативы типографским кавычкам.
Что из себя представляет тег VLAN (802.1Q)
Cisco
Хайповый заголовочек, не так ли? ) Ну не каждое, разумеется, устройство, можно захватить, но
Cisco
Прежде всего, поздравляем нашего соавтора с пополнением (т.е. появлением в его личном деле очередной
Cisco
Содержание1 Задача2 План сети3 Зачем это надо?4 Как превратить один VLAN в другой? Задача
Cisco
Здравствуйте! Сегодня я хочу поведать об одном интересном инструменте сетевого инженера как UNL. Это целая
Cisco
Продолжаем разговор про Spanning Tree Protocol. Стоит отметить тот факт, что STP разрабатывался ещё
Cisco
Всем привет! Сегодня мы поговорим о различиях в работе протоколов связующего дерева Spanning Tree
HTML-тег
— GeeksforGeeks
Тег — это стандартный тег цитаты, используемый для коротких цитат. Браузер обычно вставляет кавычки вокруг цитаты. Для более длинных цитат необходимо использовать тег
, поскольку это элемент уровня блока. Для тега
требуется как начальный, так и конечный тег.
Синтаксис:Содержание ...Примеры ниже иллюстрируют тег
в HTML:
Пример 1:HTML
<html>
<корпус>
<p>
q> GeeksforGeeksq>
Портал информатики для вундеркиндов
p>
корпус>
html>90 109
Выход:
Пример 2 (использовать CSS в теге q):
HTML
<html>
<3
голова>
<заголовок> q тегзаголовок>
<стиль>
q {
цвет: # 00cc00;
стиль шрифта: курсив;
}
стиль>
головка>
<корпус>9000
<p>
<q> GeeksforGeeksq>
A портал для компьютерных наук Компьютерщики
p>
корпус>
html>Выход:
Вс pported Браузеры:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Вниманию читателей! Не прекращайте учиться сейчас.Освойте все важные концепции HTML с помощью Web Design for Beginners | HTML курс.
HTML q тег
Пример
Отметьте короткую цитату:
Цель WWF:
Построить будущее, в котором люди будут жить в гармонии с природой.
Мы надеемся, что им это удастся.Попробуй сам "
Дополнительные примеры "Попробуйте сами" ниже.
Определение и использование
Тег
определяет короткую цитату.Браузеры обычно заключают кавычки в кавычки.
Совет: Используйте
в течение длительного времени
цитаты.Поддержка браузера
Элемент Есть Есть Есть Есть Есть Атрибуты
Атрибут Значение Описание цитировать URL Задает URL-адрес источника цитаты Глобальные атрибуты
Тег
также поддерживает глобальные атрибуты в HTML.Атрибуты событий
Тег
также поддерживает атрибуты событий в HTML.Другие примеры
Пример
Используйте CSS для стилизации элемента
:q {
цвет: серый;
стиль шрифта: курсив;
}Цель WWF:
Построить
будущее, в котором люди будут жить в гармонии с природой.
Мы надеемся, что им это удастся.