HTML Quotation and Citation Elements
In this chapter we will go through the <blockquote> , <q> , <abbr> , <address> , <cite> , and <bdo> HTML elements.
Example
Here is a quote from WWF’s website:
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.
Example
HTML <q> for Short Quotations
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
Example
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", «Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems and search-engines.
Tip: Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
Example
HTML <address> for Contact Information
The HTML <address> tag defines the contact information for the author/owner of a document or an article.
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.
Example
HTML <cite> for Work Title
The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
Note: A person’s name is not the title of a work.
The text in the <cite> element usually renders in italic.
Example
HTML <bdo> for Bi-Directional Override
BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
Example
HTML Exercises
Test Yourself with Exercises!
HTML Quotation and Citation Elements
| Tag | Description |
|---|---|
| <abbr> | Defines an abbreviation or acronym |
| <address> | Defines contact information for the author/owner of a document |
| <bdo> | Defines the text direction |
| <blockquote> | Defines a section that is quoted from another source |
| <cite> | Defines the title of a work |
| <q> | Defines a short inline quotation |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
HTML Цитаты и элементы цитирования
Элемент HTML <q> определяет краткое предложение.
Обозреватели обычно вставляют кавычки вокруг элемента <q> .
Пример
HTML <blockquote> для предложений
Элемент HTML <blockquote> определяет раздел, который цитируется из другого источника.
Браузеры добавляют отступ <blockquote> элементов.
Пример
HTML <abbr> для сокращений
Элемент HTML <abbr> определяет аббревиатуру или акроним.
Маркировка аббревиатуры может дать полезную информацию для браузеров, переводческие системы и поисковых систем.
Example
HTML <address> для контактной информации
Элемент HTML <address> определяет контактную информацию (автора/владельца) документа или статьи.
Элемент <address> обычно отображается курсивом. Большинство браузеров добавит разрыв строки до и после элемента.
Пример
HTML <cite> для названия работы
Элемент HTML <cite> определяет название произведения.
Браузеры обычно отображают <cite> элементы курсивом.
Пример
HTML <bdo> для двунаправленного переопределения
Элемент HTML <bdo> определяет двунаправленное переопределение.
Элемент <bdo> используется для переопределения текущего направления текста:
Оформление цитат на сайтах
Обычно при вёрстке текстов для веба на оформление цитат не обращают достаточного внимания. Стараясь исправить это досадное недоразумение, мы коснёмся двух вопросов: типографического оформления цитат (в той части, где чаще всего допускаются ошибки при вёрстке) и реализации этого оформления в HTML-коде.
Мы также не будем касаться вопросов проверки смысловой точности цитирования, правильного использования купюр, сокращений и дополнений — всех интересующихся ждёт «Справочник издателя и автора» А. Э. Мильчина и Л. К. Чельцовой.
Надеемся, что эту запись будет удобно использовать как справочник по часто встречающимся вопросам оформления цитат.
Типографическое оформление цитат
Кавычки
Стоящие внутри текста цитаты, набранные так же, как и основной текст, заключаются в кавычки. Если цитата выделена цветом, кеглем шрифта, другим шрифтом, курсивным начертанием, либо цитата вынесена в отдельный графически выделенный блок текста, то кавычки не ставятся. Также не выделяются кавычками цитаты-эпиграфы, если они не сопровождаются нецитатным текстом.
Кавычки ставятся только в начале и конце цитаты, независимо от размера цитаты и количества абзацев в ней.
Цитаты заключаются в кавычки такого же рисунка, что и применяемые в основном тексте в качестве основных — в подавляющем числе случаев это кавычки-ёлочки « ».
Если внутри цитаты есть слова (словосочетания, фразы), в свою очередь заключённые в кавычки, то последние должны быть другого рисунка, чем кавычки, закрывающие и открывающие цитату (если внешние кавычки — ёлочки « », то внутренние — лапки „ “, и наоборот). Например: Василий Пупкин заявил в недавнем интервью: «Компания „Пупстройтрест“ заняла почётное шестьсот двенадцатое место в рейтинге строительных компаний Запорожья».
Если в цитате встречаются кавычки «третьей ступени», то есть внутри заключённых в кавычки словосочетаний цитаты есть, в свою очередь, слова, взятые в кавычки, в качестве последних рекомендуются кавычки второго рисунка, то есть лапки. Пример из Мильчина и Чельцовой: М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из „Фауста“. Я очень люблю эту тему“». Но вообще, лучше попытаться так перестроить оформление цитаты, чтобы таких случаев не возникало.
Знаки препинания после цитаты, стоящей в конце предложения
- Если перед закрывающими кавычками стоит многоточие, восклицательный или вопросительный знак, а цитата, заключенная в кавычки, является самостоятельным предложением (таковы, как правило, все цитаты после двоеточия, отделяющего их от слов цитирующего). При этом знак препинания ставится внутри кавычек. Пример из Мильчина и Чельцовой:
Печорин писал: «Я не помню утра более голубого и свежего!»
Печорин признавался: «Я иногда себя презираю. »
Печорин спрашивает: «И зачем было судьбе кинуть меня в мирный круг честных контрабандистов?» - То же, если самостоятельным предложением заканчивается цитата, первое предложение которой начинается со строчной буквы. Например: Печорин размышляет: «…зачем было судьбе кинуть меня в мирный круг честных контрабандистов? Как камень, брошенный в гладкий источник, я встревожил их спокойствие. »
- Если перед закрывающими цитату кавычками стоит вопросительный или восклицательный знак, а цитата не является самостоятельным предложением и после всей фразы с цитатой должен был бы стоять вопросительный или восклицательный знак. Например: Лермонтов восклицает в предисловии, что это «старая и жалкая шутка!»
Цитата со словами цитирующего внутри
Несмотря на то, что внутри цитаты находится речь цитирующего, кавычки всё равно ставятся только один раз — в начале и в конце цитаты. Ставить закрывающую кавычку перед словами цитирующего и снова открывающую после них не нужно.
Если в месте разрыва цитаты отсутствуют знаки препинания, либо разрыв происходит на месте запятой, точки с запятой, двоеточия или тире, то слова цитирующего отделяются с двух сторон запятой и тире «, —» (не забывайте, что перед тире должен стоять неразрывный пробел!).
| В источнике | В тексте с цитатой |
| Я стал неспособен к благородным порывам. | «Я, — признается Печорин, — стал неспособен к благородным порывам. » |
| …Моё сердце превращается в камень, и ничто его не разогреет снова. | «… Моё сердце превращается в камень, — безнадёжно заключает Печорин, — и ничто его не разогреет снова». |
| Слишком однобокий и сильный интерес чрезмерно увеличивает напряжение человеческой жизни; ещё один толчок, и человек сходит с ума. | «Слишком однобокий и сильный интерес чрезмерно увеличивает напряжение человеческой жизни, — размышляет Д. Хармс, — ещё один толчок, и человек сходит с ума». |
| Цель всякой человеческой жизни одна: бессмертие. | «Цель всякой человеческой жизни одна, — записывает в своём дневнике Д. Хармс, — бессмертие». |
| Подлинный интерес — это главное в нашей жизни. | «Подлинный интерес, — утверждает Д. Хармс, — это главное в нашей жизни». |
Если на месте разрыва цитаты в источнике стоит точка, то перед словами цитирующего ставят запятую и тире «, —», а после его слов — точку и тире «. —» (не забываем про неразрывный пробел!), причём вторая часть цитаты начинается с прописной буквы (в простонародье называемой также «большой» или «заглавной»).
| В источнике | В тексте с цитатой |
| …Моё сердце превращается в камень, и ничто его не разогреет снова. Я готов на все жертвы, кроме этой… | «…Моё сердце превращается в камень, и ничто его не разогреет снова, — заключает Печорин. — Я готов на все жертвы, кроме этой…» |
Если на месте разрыва цитаты в источнике стоит вопросительный знак, восклицательный знак или многоточие, то перед словами цитирующего ставят этот знак и тире «? —; ! —; … —», а после его слов — точку и тире «. —», если вторая часть цитаты начинается с прописной. Если вторая часть цитаты начинается со строчной буквы (в простонародье называемой также «маленькой»), то после слов цитирующего ставится запятая и тире «, —».
| В источнике | В тексте с цитатой |
| Я иногда себя презираю… не оттого ли я презираю и других. Я стал неспособен к благородным порывам; я боюсь показаться смешным самому себе. | «Я иногда себя презираю… не оттого ли я презираю и других. — признаётся Печорин. — Я стал неспособен к благородным порывам…» |
| …Прости любовь! моё сердце превращается в камень, и ничто его не разогреет снова. | «…Прости любовь! — пишет Печорин в своём журнале, — моё сердце превращается в камень…» |
| Это какой-то врождённый страх, неизъяснимое предчувствие… Ведь есть люди, которые безотчётно боятся пауков, тараканов, мышей… | «Это какой-то врождённый страх, неизъяснимое предчувствие… — ищет объяснения Печорин. — Ведь есть люди, которые безотчётно боятся пауков, тараканов, мышей…» |
Оформление цитат в коде
Многие забывают, что в стандарте HTML 4.01 уже предусмотрены элементы для оформления цитат, набранных внутри текста, и либо вообще их не используют, либо (что ещё хуже) помещают цитаты внутрь тегов … или … . Также приводилось наблюдать использование элемента blockquote для создания отступов, что так же недопустимо с точки зрения соблюдения семантичности вёрстки.
Итак, для выделения цитат используется два элемента: блочный blockquote и инлайновый q . Кроме того, инлайновый элемент cite используется для описания источника, откуда была взята цитата. Обратите внимание, что cite используется единственно и необходимо для указания ссылки на источник, сама цитата внутрь элемента cite не включается!
Согласно спецификации HTML 4.01, элементы blockquote и q могут использовать атрибуты cite="…" , указывающий на URL, откуда была заимствована цитата (не путать с отдельным элементом cite ), и title="…" , содержимое которого будет всплывать в качестве подсказки при наведении на цитату мышкой.
К сожалению, браузеры ещё не совсем хорошо обрабатывают эти HTML-элементы. Так, атрибут cite="…" никакими браузерами не рендерится вообще. Для того, чтобы обойти эту недоработку, есть скрипт Пола Дэйвиса, выводящий в отдельном слое всплывающую подсказку со ссылкой, указанной в атрибуте cite .
Вторая глобальная недоработка, связанная с выводом инлайновых цитат, связана (сюрприз, сюрприз!) с семейством браузеров Internet Explorer. Опять же, согласно спецификации, автор документа не должен набирать кавычки при использовании элемента q . Кавычки должны рендериться браузером, причём в случае наличия вложенных цитат — ещё и разного рисунка. Ладно, допустим, Опера не соблюдает последнего требования, и кавычки у вложенных цитат одинаковые. Но IE до седьмой версии включительно не рендерит их вообще!
Кроме того, IE не понимает CSS-свойства quotes , before , after и content , чем, скотина, полностью хоронит надежды решить проблему с помощью семантически корректной вёрстки с использованием CSS.
- с использованием проприетарного CSS-свойства behavior (решение Пола Дэйвиса), запускающего JavaScript, расставляющий кавычки в IE, при этом рисунок вложенных кавычек чередуется;
- с помощью условных комментариев, простым выполнением JavaScript при загрузке страницы (решение Джеза Лемона из «Juicy Studio»), при этом рисунок вложенных кавычек постоянен;
- или обнулением кавычек в CSS с помощью свойства quotes и расстановкой кавычек в тексте вручную, но (внимание!) вне элемента q , чтобы не нарушать рекомендации W3C (решение Стейси Кордони на сайте «A List Apart»).
Поэтому, выбирая из первых двух второй способ, мы пользуемся слегка модифицированным для русского языка скриптом Джеза Лемона. Да, при отключённом JavaScript пользователь IE останется без кавычек, мы принимаем это как необходимое зло.
Наше решение по оформлению цитат
Итак, чтобы адекватно сверстать текст с цитатами, необходимо скачать скрипт «quotes.js», после чего внутри элемента head подключить его с помощью условных комментариев:
Кроме того, для браузеров, адекватно рендерящих кавычки, нужно в CSS-файле указать рисунок кавычек для русского языка. К счастью, в русской типографике вложенные кавычки имеют один рисунок независимо от уровня вложенности (что легко реализовать на CSS без привлечения дополнительных классов), но мы ещё раз настойчиво рекомендуем избегать кавычек глубокой вложенности на стадии написания текста.
// Добавление в CSS-файл
// Внешние кавычки-ёлочки
q
// Вложенные кавычки-лапки
q q
Понятно, что этот механизм при необходимости можно усложнить на случай чередующегося рисунка кавычек при глубокой вложенности, введя классы, например, q.odd и q.even и указывая класс руками непосредственно при вёрстке цитаты.
Теперь легко и семантично верстаем следующую цитату: «Успех кампании „Жальгириса“, — заявил в интервью „Russia Today“ Владимирас Пупкинс, — обусловлен не только выбором вендоров зубной пасты, но и тому, что Марк Твен называл „прыжком за дверь, ведущую внутрь“».
<q cite="http://russiatoday.com.org.uk.lv" title="Интервью Владимираса Пупкинса для «Russia Today»">Успех кампании „Жальгириса“, — заявил в интервью „Russia Today“ <cite>Владимирас Пупкинс</cite>, — обусловлен не только выбором вендоров зубной пасты, но и тому, что <cite>Марк Твен</cite> называл <q title="Один из рассказов Марка Твена">прыжком за дверь, ведущую внутрь</q></q>.
Самый смак в том, что атрибуты title="…" для вложенных тегов браузерами отрабатываются корректно.
Написание примера для корректного совместного использования вложенных элементов blockquote , q и cite оставляется читателю в качестве домашнего задания. 🙂
Update: Поправка от besisland — конечно же для установки рисунка кавычек в CSS не нужно описывать вложенные стили, достаточно стандартной функциональности свойства quotes : q
<blockquote>¶
Тег <blockquote> (от англ. block quotation — блок цитата) указывает на то, что заключенный в нем текст является развернутой цитатой. URI на источник цитаты можно указать в атрибуте cite , тогда как текстовое представление источника может быть задано элементом <cite> .
Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселей), а также с отбивкой сверху и снизу.
- blockquote
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
Для этого элемента также доступны универсальные атрибуты.
Задаёт адрес страницы, который указывает на источник цитаты внутри <blockquote> . Значение атрибута на странице не отображается и предназначено для поисковых систем.