Нередко авторы статей, чтобы подкрепить правильность своих рассуждений и придать вес сказанному, используют в своих текстах цитаты: отрывки из высказываний известных личностей, выдержки из литературных произведений и т.п. И надо заметить, удачно вставленная цитата действительно может придать вес статье и повысить у читателей доверие к написанному.
Однако статьи в Интернете просматривают не только читатели, но и поисковые роботы, которые, встретив на странице неуникальный контент, могут понизить позицию сайта в поисковой выдаче. Поэтому важно, чтобы вставленный из стороннего источника текст однозначно идентифицировался как цитата, а не как простое заимствование.
Выделение цитат внутри авторского текста
В набранных типографским способом текстах, небольшие цитаты, включённые непосредственно внутрь авторского текста, принято заключать в кавычки, а также выделять иным способом, например, с помощью курсивного начертания или уменьшенного размера шрифта. На веб-страницах же для обозначения таких цитат следует использовать элемент <q>, позволяющий реализовать и визуальное выделение (заключение в кавычки, изменение размера и начертания текста), и идентификацию содержимого как цитаты на случай просмотра страницы поисковым роботом.
Элемент <q>
Элемент <q> (сокр. от англ. quote — «цитировать», «брать в кавычки») является строчным элементом, предназначенным для выделения в тексте цитат. Большинство браузеров автоматически заключают содержимое данного элемента в кавычки.
Открывающий и закрывающий тэги элемента являются обязательными. В открывающем тэге могут присутствовать универсальные атрибуты и атрибуты событий, а также собственный атрибут cite (см. спецификацию).
Атрибут cite элемента <q> может быть использован для указания ссылки на источник цитаты или для размещения какой-либо другой информации, объясняющей контекст. Однако надо заметить, браузеры никак не реагируют на этот атрибут и нигде не отображают данную информацию.
Пример оформления цитаты:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <p>Б. Л. Пастернак подчеркивал, что <q>самое ясное, запоминающееся и важное в искусстве есть его возникновенье...</q>.</p> </body> </html>
В браузере данный текст будет отображён следующим образом:
Вид кавычек, генерируемых браузером для выделения содержимого элемента <q>, определяется значением атрибута lang, используемого в родительском элементе или в самом элементе <q>. Обычно данный атрибут используется в открывающем тэге <html> (см. пример выше), где он устанавливает вид кавычек для всей страницы.
Кавычки внутри цитаты
Поскольку кавычки, присутствующие внутри самой цитаты, должный отличаться от кавычек внешних, для изменения их вида следует использовать вложенный элемент <q> и создать специальное стилевое правило для вложенного элемента, например:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> <style> q q {quotes: "\201C" "\201D";} </style> </head> <body> <p>Как пелось в известной песне <q>врагу не сдаётся наш гордый <q>Варяг</q></q>.</p> </body> </html>
О выделении цитат размером или начертанием шрифта
При выделении текста цитат с помощью курсивного начертания или уменьшенного размера шрифта не надо забывать о цитатах со словами цитирующего внутри. Ведь слова цитирующего должны быть набраны обычным шрифтом. Для этого лучше всего использовать вложенный элемент <span> и создать специальное стилевое правило для вложенного элемента, например:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> <style> q {font-style: italic;} q span {font-style: normal;} </style> </head> <body> <p><q>… Моё сердце превращается в камень, <span>- безнадёжно заключает Печорин, —</span> и ничто его не разогреет снова</q>.</p> </body> </html>
Блоки цитат
Развёрнутые цитаты (то есть крупные выдержки из трудов других авторов) размером в один или несколько абзацев без слов цитирующего внутри выделять кавычками не принято. В печатных изданиях такие абзацы выделяют увеличенным отступом слева и справа (в полиграфии это называют набором со втяжкой); текст в абзацах нередко имеет курсивное начертание или уменьшенный размер шрифта и отделяется от основного текста статьи отчеркивающими линейками.
При использовании развёрнутых цитат на веб-страницах абзацы, являющиеся цитатой, следует помещать внутрь блочного элемента-контейнера <blockquote> (сокр. от англ. Block Quotation — «блочная цитата»). Текст, помещённый в такой контейнер, по умолчанию выводится в браузерах с увеличенным отступом слева и справа.
Оба тэга элемента <blockquote> — открывающий и закрывающий — являются обязательными. В открывающем тэге могут присутствовать универсальные атрибуты и атрибуты событий, а также собственный атрибут cite (см. спецификацию).
Атрибут cite элемента <blockquote> может быть использован для указания ссылки на источник цитаты или для размещения какой-либо другой информации, объясняющей контекст. Однако, как и в случае с элементом <q>, браузеры нигде не отображают данную информацию.
Правила разметки блоков цитат на странице
Согласно спецификации HTML, внутри элемента <blockquote> может находиться только сама цитата. Никакой пояснительный текст к цитате внутри данного контейнера недопустим.
Если необходимо увязать цитату с сопровождающим её пояснительным текстом, следует поместить то и другое в специально предназначенный для этого контейнер <figure> (см. пример ниже). При этом пояснительный текст может быть оформлен как подпись к цитате и помещён между открывающим и закрывающим тэгами элемента <figcaption>.
Пример разметки развёрнутой цитаты:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> <style> figure.for-quotes { margin-left: 0; margin-right: 0; color: #000080; } figcaption.for-quotes { margin-left: 40px; margin-right: 40px; } blockquote {font-style: italic;} cite {font-style: normal;} </style> </head> <body> <p>В бухгалтерском учете необходимо отражать все факты хозяйственной жизни, произошедшие в организации. Для этого используются счета бухгалтерского учета, которые являются накопителями информации, которая впоследствии обобщается и отражается в бухгалтерском балансе.</p> <hr> <figure class="for-quotes"> <blockquote> <p>Бухгалтерский учет ведется посредством двойной записи на счетах бухгалтерского учета, если иное не установлено федеральными стандартами. Не допускается ведение счетов бухгалтерского учета вне применяемых экономическим субъектом регистров бухгалтерского учета.</p> </blockquote> <figcaption class="for-quotes">(<cite>Федеральный закон РФ "О бухгалтерском учете"</cite>, гл. 2 ст. 10 п. 3)</figcaption> </figure> <hr> </body> </html>
В браузере это отобразится следующим образом:
Изменить отступ слева или справа для содержимого контейнера <blockquote> можно с помощью соответствующего стилевого свойства: margin-left или margin-right. Это может потребоваться, например, при использовании цитат-эпиграфов, которые обычно принято располагать в правой части страницы.
Указание на источник информации
Для выделения в текстовом содержимом HTML-страниц названий различных произведений (например, книг, статей, эссе, стихотворений, песен, сценариев, фильмов, картин, спектаклей, опер, мюзиклов, компьютерных программ и т.д.) предназначен строчный элемент <cite> (от англ. cite — «цитировать», «ссылаться»). Обычно он используется совместно с элементами <q> и <blockquote> для указания источника, откуда была взята цитата (см. пример выше), хотя может использоваться и для выделения названия документа или произведения упоминаемого вскользь, например:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <p>Более подробную информацию можно найти в <cite><a href="https://datatracker.ietf.org/doc/html/rfc1866">RFC 1866</a></cite>.</p> </body> </html>
Открывающий и закрывающий тэги элемента <cite> являются обязательными. В открывающем тэге могут присутствовать только универсальные атрибуты и атрибуты событий. Текст, содержащийся в элементе, браузеры по умолчанию выводят с курсивным начертанием.
Примечание: Спецификация от W3C допускает, что ссылка на источник может содержать имя автора, в то время, как спецификация от WHATWG этого не допускает ни в коем случае (см. спецификацию).
Другие статьи по схожей тематике
