Тег цитата html: Тег | htmlbook.ru

Цитирование в HTML: выбираем теги правильно

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи
«Quoting in HTML: Quotations, Citations, and Blockquotes».

Неправильное использование HTML-тегов
для обозначения цитат встречается
слишком часто. В этой статье мы углубимся
в эту тему, разберем разные ситуации и
рассмотрим, какие теги для них подходят.

При оформлении цитат используются
три основных элемента:

Давайте по ним пройдемся.

Элемент <blockquote>

Теги <blockquote> используются для
выделения цитаты на фоне остального
контента. Мой учитель английского языка
в старшей школе крепко вбил мне в голову,
что любая цитата длиной в четыре строки
и больше должна отделяться от остального
текста. В спецификациях HTML таких
требований нет, но если у вас есть в
тексте цитата и вы хотите, чтобы она
была выделена на фоне всего остального,
тег <blockquote> это ваш семантический
выбор.

По умолчанию браузеры выделяют цитату
при помощи отступа, добавляя margin с каждой
стороны.

See the Pen
The Blockquote Tag by Undead Institute (@undeadinstitute)
on CodePen.

Как блочный элемент, <blockquote> может
содержать внутри себя другие элементы.
Например, мы без проблем можем разбить
цитату на абзацы:

<blockquote>
   <p></p>
   <p></p> 
</blockquote>   

Но дело не ограничивается абзацами! Внутри блока <blockquote> могут быть и заголовки, и списки:

<blockquote>
     <h3></h3>
     <ul>
       <li></li>
       <li></li>
     </ul> 
</blockquote>

Важно помнить, что <blockquote> используется
для выделения цитат, а не как декоративный
элемент дизайна. Пользователи, использующие
скринридеры, могут перемещаться между
цитатами. Поэтому использование
<blockquote> для чисто эстетических нужд
может сбивать этих пользователей с
толку. Если вам просто нужно выделить
какой-то текст, не являющийся цитатой,
пожалуй, лучшим решением будет элемент
<div> с заданным классом.

blockquote,
.callout-block {
  /* These could share styling */
}

Выделение цитаты при помощи
тега <q>

Теги <q> предназначены для цитат
внутри текста. Мой учитель английского
сказал бы, что речь идет о цитатах длиной
меньше четырех строк. Многие современные
браузеры автоматически добавляют
кавычки к цитатам в виде псевдоэлементов,
но для более старых браузеров стоит
иметь запасной вариант.

See the Pen
The Q Tag by CSS-Tricks (@css-tricks)
on CodePen.

Обычные кавычки в тексте так же валидны
для встроенных в предложения цитат, как
и элемент <q>. Но использование <q>
имеет преимущества, поскольку у этого
элемента есть атрибут cite, автоматическая
вставка кавычек и автоматическое
управление уровнями цитирования.
Элементы <q> не следует использовать
для обозначения саркастических замечаний
и воображаемых кавычек, при разговоре
передаваемых жестами. Но если вы знаете,
как правильно выделить воображаемые
кавычки, расскажите и мне, пожалуйста.

Атрибут cite

Оба элемента — <q> и <blockquote> —
могут использовать атрибут cite (от англ.
«citation» — ссылка). Этот атрибут содержит
URL, предоставляющий контекст и/или ссылку
на цитируемый материал. В спецификации
указано, что URL может быть окружен
пробелами. Я не знаю, зачем это отдельно
оговаривается, но если вы действительно
хотите разозлить божеств семантического
кода, вам придется делать нечто большее,
чем просто разбрасываться пробелами.

<p>The officer left a note saying <q cite="https://johnrhea.com/summons">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

Сам атрибут cite по умолчанию для
пользователей не виден. Но вы можете
добавить немного CSS-магии, как в приведенном
ниже примере. Можно даже сделать так,
чтобы источник появлялся при наведении
мыши на цитату.

See the Pen
Attributable citations by CSS-Tricks (@css-tricks)
on CodePen.

Но эти подходы нельзя назвать хорошими.
Если вам нужно, чтобы пользователь видел
источник цитаты и мог перейти по ссылке,
стоит это делать при помощи HTML, возможно,
используя элемент <cite>.

Элемент <cite>

Теги <cite> должны использоваться для указания произведений, а не на имени человека, написавшего или сказавшего что-либо. Иными словами, этот элемент вообще не предназначен для цитат. Вот примеры из спецификаций:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

Вот еще пример:

See the Pen
Cite This! by CSS-Tricks (@css-tricks)
on CodePen.

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

По умолчанию браузеры выделяют элемент
cite курсивом. Сам элемент не привязан к
элементами <q> или <blockquote>, так что
их может вообще не быть. Если вы хотите
упомянуть какое-нибудь произведение и
выделить название, поместите его в
элемент <cite>. Семантические божества
будут довольны, что вы не использовали
элементы <i> или <em>.

Но куда вставить элемент <cite>, если
хочешь указать источник цитаты? Внутри
блока цитаты? Снаружи? Если мы поместим
его внутри <blockquote> или <q>, этот
элемент станет частью цитаты. По этой
причине такое расположение запрещено
спецификацией.

<!-- Это неправильно -->
<blockquote>
  Quote about cupcake distribution from an article
  <cite>The Article</cite>
</blockquote>

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

<div>
  <blockquote>
    Quote about cupcake distribution from an article
  </blockquote>
  <cite>The Article</cite>
</div>

А как насчет элемента <figure>?

Все же есть один способ подписать
цитату так, чтобы семантические божества
были довольны: вы можете поместить
элемент <blockquote> внутрь элемента
<figure>. А следом можно поместить имя
автора и источник (окруженный тегами
<cite>) в элемент <figcaption>.

<figure>
  <blockquote>
    But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.
  </blockquote>
  <figcaption>
    — Jeremy Keith, <cite>Mental models</cite>
  </figcaption>
</figure>

Несмотря на то что при таком подходе
количество необходимых элементов
удваивается, он имеет ряд преимуществ:

1. Это семантически правильное
   использование всех четырех элементов.
2. Это позволяет и включить имя автора,
   и отделить его от названия произведения.
3. Вы получаете простой способ оформить
   цитату без всяких <div> и <span>.

See the Pen
It Figures You’d Say That by CSS-Tricks (@css-tricks)
on CodePen.

Ничто из перечисленного не
предназначено для оформления диалогов

Все перечисленные элементы предназначены
для привлечения внимания. А диалоги это
просто обмен репликами между людьми,
которые разговаривают или переписываются
друг с другом. (Прим. перев.: в английском
языке диалоги передаются непрямой
речью, при помощи кавычек).

Для диалогов не должны использоваться
ни <blockquote>, ни <q>, ни <cite>. В
остальном диалог можно оформлять как
угодно, для этого нет прописанного
семантического способа. То есть,
спецификация предлагает элементы <p>
и знаки пунктуации, а также <span> или
<b> для обозначения говорящего.

Доступность цитат

Исходя из того, что я читал, у скринридеров
не должно быть проблем с распознаванием
семантически правильно использованных
тегов <q>, <blockquote> и <cite>.

Еще немного о кавычках

К <blockquote> можно добавлять кавычки,
используя псевдоэлементы CSS. Элемент
<q> сам по себе добавляет кавычки, но
можно добавить их в виде псевдоэлементов
— в качестве костыля для более старых
браузеров, где они не добавляются
автоматически. Это не повредит отображению
цитаты в современных браузерах: они
перезаписывают установленные по
умолчанию псевдоэлементы, а не просто
добавляют дополнительные.

Но не следует предполагать, что так
вы точно получите «умные» открывающие
и закрывающие кавычки. Даже если браузер
поддерживает умные кавычки, порой
отображаются просто прямые. Чтобы
обезопасить себя, лучше использовать
свойство
CSS quotes:

blockquote {
  quotes: "“" "”" "‘" "’";
}

See the Pen
«Quot-a-tizing» the blockquote by CSS-Tricks (@css-tricks)
on CodePen.

Многоуровневое цитирование

Теперь давайте обратим внимание на
уровни цитирования. Тег <q> автоматически
их учитывает.

Допустим, вы работаете в регионе, где
применяется британское соглашение об
использовании одинарных кавычек. Вы
можете прописать очередность применения
разных типов кавычек в правило CSS quotes,
указав одинарные кавычки (открывающую
и закрывающую) первыми в списке. Вот
пример с двумя вариантами:

See the Pen
Quote Within a Quote by CSS-Tricks (@css-tricks)
on CodePen.

Вложенность цитирования не ограничена.
Вложенные элементы <q> могут быть
даже внутри блока <blockquote>, находящегося
внутри другого блока <blockquote>.

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

 blockquote q {
  quotes: "‘" "’" "“" "”";
}

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

q {
  quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”";
}

Висячая пунктуация

Многие эксперты в сфере типографии
скажут вам, что висячая пунктуация в
цитатах выглядит лучше (и они правы). По
сути, висячая пунктуация это кавычки,
вынесенные за текст, выровненный по
вертикали.

Для достижения такого эффекта можно
использовать небольшое отрицательное
значение свойства text-indent. Точное значение
может варьироваться в зависимости от
шрифта, так что обязательно проверьте
величину отступа с тем шрифтом, который
используете.

blockquote {
  text-indent: -0.45em;
}

Есть и лучший способ сделать висячую
пунктуацию: можно использовать
CSS-свойство hanging-punctuation. Но на момент
написания этой статьи оно поддерживается
только в Safari:

/* Fallback */
blockquote {
  text-indent: -0.45em;
}

/* If there's support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) {
  blockquote {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

Использование hanging-punctuation лучше, потому
что это свойство просто работает, если
может.

See the Pen
Hanging Your Punctuation by CSS-Tricks (@css-tricks)
on CodePen.

Можно ли анимировать кавычки?

Естественно.

See the Pen
Dancing Quotes by CSS-Tricks (@css-tricks)
on CodePen.

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

Погодите, возможно, это как раз неплохой вариант для оформления воображаемых кавычек!

HTML Цитаты

Для создания цитат в языке HTML используются два элемента: блочный элемент <Ыockquote> и строчный элемент <q>.
Тег <Ыockquote> используется для отображения длинных цитат, занимающих целый абзац и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. Внутри него могут присутствовать другие элементы форматирования текста.

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

Для обоих элементов может быть указан атрибут CITE, значением которого является URL-aдpec цитируемоrо фраrмента.

Пример: длинные и короткие цитаты

 Зенит — это наивысшая для наблюдателя точка на небосклоне
в вертикальном направлении, которую, как известно,
можно легко определить с помощью вертикального отвеса.
Как сказал А. А. Милн, некоторые люди говорят с животными.

<!-- Длинная цитата -->
<blockquote cite="http://www.world.org/zenit/index.html"> Зенит — это наивысшая для наблюдателя точка на небосклоне
в вертикальном направлении, которую, как известно,
можно легко определить с помощью вертикального отвеса.</blockquote> 
  
<!-- Короткая цитата -->
<p>Как сказал А. А. Милн, <q>некоторые люди говорят с животными.</q><p>

Тег <abbr>

Аббревиатура — принятое на письме сокращение слов или слово, составленное из нескольких частей друrих слов (ВУЗ, НИИ, исполком и др.).
При употреблении в тексте какого-либо акронима или аббревиатуры следует
воспользоваться тегом <abbr>. С помощью атрибута «title» можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте «title». Чтобы отличать аббревиатуры от обычноro текста, они подчеркиваются пунктирной линией.

Пример: Аббревиатура

NАSА проводит несколько невероятных космических экспериментов.
Пp.  Стивен Хокинг — физик-теоретик и космолог. 

<!-- Аббревиатура -->
<abbr title="Национальное агентство по аэронавтике и исследованию
космического пространства">NАSА</abbr> проводит несколько невероятных
космических экспериментов.</p>
<p><abbr title="Пpoфeccop">Пp. </abbr> Стивен Хокинг — физик-теоретик и космолог.</p>

Тег <address>

Тег <address> используется для указания контактной информации, адреса и телефонов. Он может содержать почтовый адрес, а также адрес электронной почты или номер телефона. Большинство браузеров отображают содержимое элемента <address> шрифтом с курсивным начертанием.

Пример: Адрес

HTML- Учебный курс
Белый Максим Максимович
Северо-Западный институт технологий
Теплогорского государственного университета технологии и дизайна
[email protected]

<!-- Адрес -->
<address> HTML- Учебный курс
Белый Максим Максимович
Северо-Западный институт технологий
Теплогорского государственного университета технологии и дизайна
<a href="mailto:[email protected]">[email protected]</a></address>

Теги <cite> и <dfn>

Тег <cite> используется при оформлении ссылки на какой-то первоисточник, например на книгу, веб-сайт или научную работу, для обозначения упоминаемого источника. Часто используется в списках литературы, при указании aвторских прав или упоминании имени владельца ресурса. Браузеры отображают содержимое элемента <cite> шрифтом с курсивным начертанием.

Тег <dfn> используется для обозначения определения какого-либо нового термина. Объяснение нового термина (научного концепта или узкопрофильного названия) в тексте называется «определением». Элемент <dfn> можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.

Пример: Источники и определения

Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма Красный дракон Стивена Хопкинса.
Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости

<!-- Источник -->
<p>Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма <cite>Красный дракон</cite> Стивена Хопкинса.</p>
<!-- Определение -->
<p><dfn>Импульс тела</dfn> — векторная величина, направление её вектора совпадает
с направлением скорости</p>

Тег <bdo>

Тег <bdo> управляет направлением отображаемого текста. Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево).

Пример: Направление текста

Если Ваш браузер поддерживает двунаправленный алгоритм (bdo),
следующая строка будет написана справа налево (rtl)
Этот текст написан справа налево.

<!-- Направление текста -->
<p>Если Ваш браузер поддерживает двунаправленный алгоритм (bdo),
следующая строка будет написана справа налево (rtl)</p>
<bdo dir="rtl">Этот текст написан справа налево.</bdo></p>

Задачи

Итоговое задание

[14-18]

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

Пришло время повторить изученное и выполнить четыре несложных задания:

Короткая цитата

Используя логический элемент HTML, добавьте кавычки вокруг слова: «Теория».

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Короткая цитата</title>  
 </head>
 <body>
  <p>Теория предсказывает новые явления и новые законы.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 <title>Короткая цитата</title>  
 </head>
 <body>
  <p><q>Теория<q> предсказывает новые явления и новые законы.</p>
 </body>
</html>

Длинная цитата

Поместите нижеприведенный текст внутрь такого элемента, который сделает его цитатой с отступом слева. Задайте URL ресурса, откуда взята эта цитата: «http://www.world.org».

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Длинная цитата</title>  
 </head>
 <body>
  Характеристикой быстроты и направления движения служит физическая величина — скорость.
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Длинная цитата</title>  
 </head>
 <body>
  <blockquote cite="http://www.world.org"> Характеристикой быстроты и направления движения
служит физическая величина — скорость.</blockquote>
 </body>
</html>

Аббревиатура

Используя элемент HTML сделайте так, чтобы при наведении указателя мыши на аббревиатуру WWW появиласья подсказка, coдержащая ее расшифровку: «World Wide Web».

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Аббревиатура</title>  
 </head>
 <body>
  <p>Стремительное развитие WWW началось в ceредине 90-x годов ХХ века.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Аббревиатура</title>  
 </head>
 <body>
  <p>Стремительное развитие  <abbr title="World Wide Web">WWW</abbr> началось в ceредине 90-x годов ХХ века.</p>
 </body>
</html>

Направление текста

С помощью элемента HTML измените направление текста справа-налево.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Направление текста</title>  
 </head>
 <body>
  <p>Путь — величина скалярная.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Направление текста</title>  
 </head>
 <body>
  <p><bdo dir="rtl">Путь — величина скалярная.</bdo></p>
 </body>
</html>

Использование кавычек, цитат и тега q

От автора: при правильном использовании часто игнорируемых, а с другой стороны часто злоупотребляемых тегов <blockquote>, <cite> и <q> можно создавать по-настоящему семантически и типографски богатые страницы.

Главная идея, которую стоит держать в голове, в том, что эти элементы используются для разграничения слов или цитат в общем контенте страницы, но не относящихся к контексту. Вот почему теги <blockquote>, <cite> и <q> почти всегда содержат контент от других людей.

Цитата

Тег <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>

Но к несчастью, ни один известный мне браузер на сейчас не использует этот атрибут. Как альтернатива атрибуту cite, сослаться на источник можно, добавив тег <footer> и/или тег <cite> внутри цитаты <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>

Пару замечаний: Тег <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: «„» «“» «‚» «‘» }

В википедии можно найти кавычки для других языков. Огромная благодарность 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.

Визуально тег <cite> делает текст курсивным, хотя и не должен для этого использоваться вовсе (для этого есть <em> или <i>). <cite> содержит название работы, автора, ссылку (ссылка именно видна в отличие от href). В первом нашем примере <cite> можно использовать так:

<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 разными способами

От автора: слишком часто можно увидеть неправильный HTML-код, используемый для цитат в разметке. В этой статье давайте разберемся со всем этим, рассмотрим различные ситуации и разные HTML-теги для этих ситуаций.

В цитатах используются три основных элемента HTML: <blockquote>, <q>, <cite>. Давайте рассмотрим их по порядку.

blockquote

Теги blockquote используются для того, чтобы цитируемый текст отличался от остального содержимого. Мой учитель английского в десятом классе вложил мне в голову, что любая цитата из четырех или более строк должна быть выделена таким образом. Спецификация HTML не содержит такого требования, но когда текст является цитатой, и вы хотите, чтобы он был отделен от окружающего текста и тегов, blockquote является семантическим выбором.

По умолчанию браузеры вставляют отступы, добавляя поля с каждой стороны.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как элемент потока (то есть элемент «уровня блока»), blockquote может содержать внутри другие элементы. Например, мы можем без проблем вставить абзацы:

<blockquote>
<p></p>
<p></p>
</blockquote>

Но это могут быть и другие элементы, такие как заголовок или неупорядоченный список:

<blockquote>
<h3></h3>
<ul>
<li></li>
<li></li>
</ul>
</blockquote>

Важно отметить, что blockquote должны использоваться только для цитат, а не как декоративный элемент в дизайне. Это также способствует доступности, поскольку пользователи программы чтения с экрана могут переходить между цитатами. Таким образом, элемент blockquote, используемый исключительно для эстетики, может действительно запутать этих пользователей. Если вам нужно что-то более декоративное, выходящее за пределы расширенных цитат, то, возможно, лучше использовать div с классом.

blockquote,
.callout-block {
/* These could share styling */
}

q

Теги q предназначены для встроенных цитат или, как сказал бы мой учитель в десятом классе, тех, что имеют меньше четырех строк. Многие современные браузеры автоматически добавляют кавычки для цитат в качестве псевдо-элементов, но для старых браузеров может потребоваться резервное решение.

Стандартные кавычки так же действительны для встроенных цитат с элементом <q>. Преимущества использования <q>, однако, заключаются в том, что он включает атрибут cite, автоматическую обработку кавычек и автоматическую обработку уровней кавычек. Элементы <q> не должны использоваться для сарказма. Или собственного описания автора. Но если вы можете четко определить, как размечать подобные цитаты, пожалуйста, дайте мне знать. Потому что это было бы «круто».

Атрибут cite

И <q>, и blockquotes могут использовать атрибут цитирования (cite). Этот атрибут содержит URL, который предоставляет контекст и / или ссылку на цитируемый материал. Спецификация подразумевает, что URL может быть окружен пробелами. (Я не уверен, почему это указано, но если вы хотите разозлить божеств семантического кода, вам придется сделать больше, чем просто выбросить пробелы.)

<p>The officer left a note saying <q cite=»//johnrhea.com/summons»>You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

Атрибут cite не виден пользователю по умолчанию. Вы можете добавить его с помощью магии CSS, как показано в следующей демонстрации. Вы можете даже повозиться с тем, чтобы цитата появлялась при наведении.

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

Элемент cite

Тег cite следует использовать для ссылки на авторскую работу, а не на человека, который сказал или написал цитируемую фразу. Другими словами, его не нужно выделять кавычками. Вот примеры из спецификации:

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

Вот еще один пример:

Если бы автор этой статьи сказал вам, что он даст вам кекс, а вы использовали cite для его имени, это было бы семантически неверно. Если бы вы использовали это для статьи, в которой он предложил вам кекс, это было бы семантически правильно, но поскольку автор этого не сделал, вы все равно не получили бы кекс. Сожалею.

По умолчанию браузеры выделяют курсивом теги cite, для элемента cite не требуется наличие <q> или blockquote. Если вы хотите процитировать книгу или другую творческую работу, добавьте ее в элемент cite. Семантические божества будут благосклонны к вам, если вы не используете <i> либо <em>.

Но где добавлять элемент cite? Внутри? За пределами? Если положить его в blockquote или <q> мы делаем его частью цитаты. Спецификацией запрещено делать это только по данной причине.

<!— This is apparently wrong —>
<blockquote>
Quote about cupcake distribution from an article
<cite>The Article</cite>
</blockquote>

Выносить его наружу просто кажется неправильным, а также требует, чтобы у вас был содержащий элемент, например, div, если вы хотите объединить их вместе.

<div>
<blockquote>
Quote about cupcake distribution from an article
</blockquote>
<cite>The Article</cite>
</div>

Если вы поищите решение этого вопроса в Google, то можете натолкнуться на статью Доктора HTML5 2013 года, которая противоречит многому изложенному здесь. Тем не менее, по ссылкам на официальную документацию в ней вы найдете указания соответствующие статье, которую вы читаете сейчас, а не статье «Доктора HTML5». Скорее всего, документация была изменена с тех пор.

Эй, а как насчет элемента figure?

Один из способов разметки цитаты — и таким образом, чтобы угодить божествам семантического кода — это поместить блочную цитату в элемент figure. Затем поместите элемент cite и любую другую информацию об авторе или цитировании в figcaption.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<figure>
<blockquote>
But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.
</blockquote>
<figcaption>
&mdash; Jeremy Keith, <cite>Mental models</cite>
</figcaption>
</figure>

Хотя это удваивает количество необходимых элементов, у этого подхода есть несколько преимуществ:

Это семантически верно для всех четырех элементов.

Это позволяет вам включать и инкапсулировать информацию об авторе, не упоминая название работы.

Это дает вам простой способ оформить цитату, не прибегая к div, span или чему-то в этом роде.

Ничего из этого не относится к dialog

Никакого <dialog>! Он предназначен для модалов, привлекающих внимание. Диалог — это, например, разговорный обмен между людьми, говорящими или печатающими друг другу.

Ни blockquote, ни другое <q>, ни cite не должны использоваться для диалога и подобных обменов фразами между ораторами. Если вы размечаете диалог, вы можете использовать все, что вам нужно. Не существует единственного семантического способа сделать это. Тем не менее, в спецификации предлагаются теги <p> и знаки пунктуации с тегами span или <b> для обозначения динамики, и теги <i> для обозначения направления разговора.

Доступность цитат

Согласно исследованию, которое я провел, экранные дикторы не должны иметь проблем с пониманием меток <q>, blockquote или cite.

Больше «способов» «цитирования»

Вы можете добавить кавычки к blockquote, используя псевдо-элемент CSS. Элемент <q> уже имеет кавычки, так что их не нужно добавлять отдельно. Поскольку именно так современные браузеры добавляют кавычки, нет опасности добавлять повторяющиеся кавычки. Новые браузеры будут перезаписывать псевдо-элементы по умолчанию, а старые браузеры, которые поддерживают псевдо-элементы, будут добавлять кавычки.

Но вы не можете, как и я, предполагать, что вышеизложенное всегда даст вам умные открывающие и закрывающие. Даже если шрифт поддерживает умные кавычки, иногда отображаются прямые кавычки. Чтобы обезопасить себя, лучше использовать CSS-свойство quotes.

blockquote {
quotes: «“» «”» «‘» «’»;
}

Многоуровневое цитирование

Теперь давайте рассмотрим уровни цитат. Тег <q> автоматически регулирует уровень цитаты. Допустим, вы находитесь в области, которая использует британское соглашение об использовании одинарных кавычек. Вы можете использовать CSS правило кавычек, чтобы ставить открывающие и закрывающие одинарные кавычки первыми в списке. Вот пример обоих способов:

Ограничений на глубину вложения нет. Вложенные элементы <q> могут даже находиться внутри цитаты, которая находится внутри цитаты.

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

blockquote q {
quotes: «‘» «’» «“» «”»;
}

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

q {
quotes: «“» «”» «‘» «’» «“» «”» «‘» «’» «“» «”»;
}

Выносная пунктуация

Многие эксперты по типографии скажут вам, что вынос кавычек в цитатах выглядит лучше (и они правы). Выносная пунктуация — это, в данном случае, кавычки, которые выводятся из текста, так что символы текста располагаются вертикально, с отступом от них.

Одной из возможностей в CSS является использование небольшого отрицательного значения свойства text-indent. Точный отрицательный отступ будет варьироваться в зависимости от шрифта, поэтому обязательно перепроверьте интервал для шрифта, который вы в конечном итоге используете.

blockquote {
text-indent: -0.45em;
}

Есть лучший способ решить это, используя свойство CSS hanging-punctuation. Оно на момент написания этой статьи поддерживается только в Safari, поэтому нам придется вводить прогрессивное улучшение:

/* Fallback */
blockquote {
text-indent: -0.45em;
}

/* If there’s support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) {
blockquote {
text-indent: 0;
hanging-punctuation: first;
}
}

Использование hanging-punctuation лучше, потому что это менее неудобно.

Можем ли мы анимировать кавычки?

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

Автор: John Rhea

Источник: //css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Вставляем цитаты при помощи HTML

Серёжа СыроежкинКопирайтер

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

<!DOCTYPE html>
<html>
 <head>
  <title>Цитата в HMTL - "Нубекс"</title>
  <meta charset="utf-8">
  <style>
   blockquote:before, blockquote:after {
    font-size: 2.5em;
    color: red;
   }
   blockquote:before {
    content: '«';
    float: left;
   }
   blockquote:after {
    content: '»';
    float: right;
   }
   blockquote p {
    margin: 0.8em 2.5em;
   }
  </style>
 </head>
 <body>
  <p>Хочу привести следующую цитату:</p>
    <hr />
  <blockquote>
   <p align="center">Что бы такого ещё съесть, чтобы похудеть?</p>
  </blockquote>
    <hr />
 </body>
</html>

В данном примере цитата обрамляется кавычками (blockquote:before и blockquote:after) и горизонтальными разделителями сверху и снизу.

Помимо приведенного тега, цитату в тексте можно выделить при помощи тега q:

<!DOCTYPE html>
<html>
 <head>
  <title>Цитата в HMTL (тег q) - "Нубекс"</title>
  <meta charset="utf-8">
  <style>
   q {
    font-family: Serif;
    color: blue;
    font-style: italic, bold;
    quotes: "\00AB" "\00BB"; 
   }
  </style>
 </head>
 <body>
  <p>К сожалению, актуальна и по сей день фраза: <q>Он ее одел, а она его обула.</q></p>
  <p><cite>http://nubex.ru</cite></p>
 </body>
</html>

Поскольку в различных языках существуют свои традиции в использовании кавычек, иногда нужно использовать другие, отличные от стандартных. Изменить кавычки для обрамления цитаты можно при помощи свойства quotes. В приведенном примере в качестве обрамления цитаты используются традиционные для русского языка кавычки-ёлочки.

В тегах <cite></cite> можно дополнительно указать источник цитаты, ссылку или сноску на другой документ.

В конструкторе сайтов «Нубекс» есть возможность добавления красивых цитат при помощи визуального редактора.

Смотрите также:

Тег | HTML справочник

HTML теги

Значение и применение

HTML тег <blockquote> (HTML Block Quotation Element) используется для определения в документе блочной цитаты (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа (по умолчанию 40 пикселей).

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

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

Атрибуты

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования блочных цитат</title>
	</head>
	<body>
		<h4>Пример использования коротких цитат:</h4>
		<p><q> Деньги не пахнут </q> - фраза, которую, как считается, произнёс император Веспасиан.</p>
		<hr>
		<h4>Пример использования длинных цитат:</h4>
		<p>Здесь информация с сайта «Википедия»:</p>
		<blockquote cite = https://ru.wikipedia.org/wiki/Pecunia_non_olet> 
		Деньги не пахнут - крылатое латинское выражение. Слова, приписываемые императору Веспасиану,
		якобы произнесенные им после получения денег от налога на общественные уборные Рима
		и обращённые к его сыну Титу, который выразил неудовольствие по этому поводу. </blockquote>
		<hr>
	</body>
</html>

Атрибут cite указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера.

Ниже приведён пример, как это отбражается в браузере (к заголовкам применен тег <h4>, а между примерами использован тег <hr> – горизонтальная черта):

Пример использования коротких и длинных цитат в HTML.

Отличия HTML 4.01 от HTML 5

В HTML 4.01 элемент определял длинную цитату, а в HTML5 определяет раздел, который цитируется из другого источника.

Значение CSS по умолчанию

blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML теги

Тег | HTML справочник

HTML теги

Значение и применение

HTML-тег <q> (HTML Quote Element) используется для выделения коротких цитат (строчная цитата). Как правило, браузеры автоматически устанавливают открывающиеся и закрывающиеся кавычки в начале и в конце выделенного текста.

Обращаю Ваше внимание, что для использования длинных цитат в документе, существует специальный блочный HTML элемент <blockquote>.

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

Атрибуты

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования элемента <q></title>
	</head>
	<body>
		<h4>Пример использования коротких цитат:</h4>
		<p><q cite = https://ru.wikipedia.org/wiki/Pecunia_non_olet> Деньги не пахнут </q> - фраза, которую, как считается, произнёс император Веспасиан.</p>
		<hr>
		<h4>Пример использования длинных цитат:</h4>
		<p>Здесь информация с сайта «Википедия»:</p>
		<blockquote>Деньги не пахнут - крылатое латинское выражение. Слова, приписываемые императору Веспасиану,
		якобы произнесенные им после получения денег от налога на общественные уборные Рима
		и обращённые к его сыну Титу, который выразил неудовольствие по этому поводу. </blockquote> 
	</body>
</html>

Атрибут cite указывает URL адрес ресурса, из которого была заимствована цитата. Для пользователя этот атрибут не отображается (не видимо его применение). Он может использоваться поисковыми машинами и в статистических целях при работе скриптов на стороне сервера.

Ниже приведён пример, как это отображается в браузере (к заголовкам применен тег <h4>, а между примерами использован тег <hr> – горизонтальная черта):

Пример использования коротких и длинных цитат в HTML.

Отличия HTML 4.01 от HTML 5

Нет.

Значение CSS по умолчанию

q {
display: inline;
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

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

Элемент поддерживает «атрибуты событий».

HTML теги

HTML-цитат Элементы

В этой главе мы рассмотрим

, , , <адрес> , ,
и HTML-элементов.

---

Пример

Вот цитата с сайта WWF:

Уже почти 60 лет WWF защищает будущее природы.
Ведущая в мире природоохранная организация,
WWF работает в 100 странах и поддерживается более чем одним миллионом членов в Соединенных Штатах и
почти пять миллионов во всем мире.

Попробуй сам »

---

HTML

для предложений

Элемент HTML

определяет раздел, который
цитируется из другого источника.

Браузеры обычно делают отступ

элементов.

Пример

Вот цитата с веб-сайта WWF:

На протяжении 50 лет WWF защищает будущее природа.
В мире
ведущая природоохранная организация,
WWF работает в 100 странах мира и является
при поддержке
1,2 миллиона членов в США и
человек, близких к 5
миллионов во всем мире.

Попробуй сам »

---

HTML

для коротких предложений

Тег HTML определяет короткую цитату.

Браузеры обычно заключают кавычки в кавычки.

Пример

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

Попробуй сам »

---

---

HTML

для сокращений

Тег HTML определяет аббревиатуру или акроним, например «HTML»,
«CSS», «Мистер»,
«Доктор», «Как можно скорее», «Банкомат».

Маркировка сокращений может дать полезную информацию браузерам, перевод
системы и поисковые системы.

Совет: Используйте глобальный атрибут заголовка для
показать описание для
аббревиатура / акроним при наведении указателя мыши на элемент.

Пример

ВОЗ была основана в
1948г.

Попробуй сам »

---

HTML

<адрес> для контактной информации

Тег HTML

определяет контактную информацию автора / владельца документа.
или статья.

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

Текст в элементе <адрес> обычно отображается курсивом ,
и браузеры будут
всегда добавляйте разрыв строки до и после элемента <адрес> .

Пример

Написано Джоном Доу.

Посетите нас по адресу:

Example.com

Box 564, Диснейленд

USA

Попробуй сам »

---

HTML

для названия работы

Тег HTML определяет заголовок
творческая работа (эл.грамм. книга, стихотворение, песня, фильм, картина, скульптура и т. д.).

Примечание: Имя человека не является названием произведения.

Текст в элементе обычно отображается курсивом .

Пример

Крик Эдварда Мунка. Написана в 1893 году.

Попробуй сам »

---

HTML

для двунаправленного обхода

BDO означает двунаправленное переключение.

Тег HTML используется для переопределения
текущее направление текста:

Пример

Этот текст будет написан справа налево

Попробуй сам »

---

HTML-упражнения

---

HTML-цитаты и элементы цитирования

Тег	Описание
	Определяет аббревиатуру или акроним
<адрес>	Определяет контактную информацию автора / владельца документа
	Определяет направление текста
	Определяет раздел, цитируемый из другого источника
	Определяет название произведения
	Определяет короткую встроенную цитату

: элемент цитаты блока — HTML: язык разметки гипертекста

HTML-элемент

указывает, что заключенный текст является расширенной цитатой.Обычно визуально это отображается с помощью отступа (см. Примечания, чтобы узнать, как это изменить). URL-адрес источника цитаты может быть задан с использованием атрибута cite , а текстовое представление источника может быть задано с использованием элемента .

Атрибуты этого элемента включают глобальные атрибуты.

указать

URL-адрес, указывающий на исходный документ или сообщение для цитируемой информации. Этот атрибут предназначен для указания информации, объясняющей контекст или ссылку на цитату.

Чтобы изменить отступ, применяемый к цитируемому тексту, используйте свойства CSS margin-left и / или margin-right или сокращенное свойство margin .

Чтобы включить более короткие кавычки в строку, а не в отдельный блок, используйте элемент (Котировка).

Этот пример демонстрирует использование элемента

для цитирования отрывка из RFC 1149, Стандарт передачи дейтаграмм IP на Avian Carrier.

  

  
 Авианосцы могут обеспечить высокую задержку, низкую
  пропускная способность и обслуживание на малых высотах. В
  топология подключения ограничена одним
  двухточечный путь для каждой несущей, используемый с
  стандартные носители, но можно использовать многие носители
  без значительного вмешательства друг в друга,
  вне ранней весны. Это из-за 3D
  эфирное пространство, доступное носителям, в отличие от
  в 1D эфир, используемый IEEE802.3. Перевозчики
  иметь внутреннюю систему предотвращения столкновений, которая
  увеличивает доступность. 

  

Вывод этого фрагмента HTML выглядит следующим образом:

Таблицы

BCD загружаются только в браузере.

• Элемент для встроенных цитат.
• Элемент для цитирования источников.

Цитирование в HTML: цитаты, цитаты и цитаты

Очень часто можно увидеть неправильный HTML, используемый для кавычек в разметке.В этой статье давайте углубимся во все это, рассмотрим различные ситуации и различные HTML-теги, которые помогут справиться с этими ситуациями.

В цитатах используются три основных HTML-элемента:

Давайте посмотрим.

Цитаты

Теги

Blockquote используются для отличия цитируемого текста от остального содержимого. Мой учитель английского в десятом классе вбил мне в голову, что любая цитата, состоящая из четырех или более строк, должна разделяться таким образом. В спецификации HTML такого требования нет, но если текст представляет собой цитату и вы хотите, чтобы он располагался отдельно от окружающего текста и тегов, цитата является семантическим выбором.

По умолчанию браузеры делают отступы для кавычек, добавляя поля с каждой стороны.

См. Pen
The Blockquote Tag от Undead Institute (@undeadinstitute)
на CodePen.

Как элемент потока (т.е. элемент «уровня блока») цитата может содержать внутри себя другие элементы. Например, мы можем без проблем перетащить туда абзацы:

  <цитата>
  
 
  
 

Но это могут быть и другие элементы, такие как заголовок или неупорядоченный список:

  <цитата>
    
 
    

      
 
      
 
    

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

  цитата,
.callout-block {
  / * Они могут иметь одинаковый стиль * /
}  

Котировка с Q

тегов Q ( ) предназначены для встроенных цитат, цитат, или, как сказал бы мой учитель в десятом классе, заключенных в четыре строки.Многие современные браузеры автоматически добавляют кавычки в кавычки как псевдоэлементы, но вам может потребоваться решение для резервного копирования для старых браузеров.

См. Pen
The Q Tag от CSS-Tricks (@ css-tricks)
на CodePen.

Типичные кавычки так же допустимы для встроенных кавычек, как и элемент . Однако преимущества использования заключаются в том, что он включает атрибут cite, автоматическую обработку кавычек и автоматическую обработку уровней котировок. Элементы не должны использоваться для сарказма (например, «вы, , использовали бы тег для сарказма, не так ли?») Или для обозначения слова с кавычками (например, «круто» — это «точное» описание автора). Но если вы можете придумать, как разметить авиаквоты, дайте мне знать. Потому что это было бы «круто».

Атрибут цитирования

Как , так и цитаты могут использовать атрибут цитирования ( cite ).Этот атрибут содержит URL-адрес, который предоставляет контекст и / или ссылку на цитируемый материал. В спецификации говорится, что URL-адрес может быть окружен пробелами. (Я не уверен, почему это указано, но если вы хотите рассердить божеств семантического кода, вам придется сделать больше, чем просто разбрасывать пробелы.)

  
 Офицер оставил записку, в которой говорилось:  Вы были вызваны на явку 4 января по обвинению в попытке подкупа читателей. 
  

Атрибут cite по умолчанию не виден пользователю. Вы можете добавить его, добавив немного магии CSS, как в следующей демонстрации. Вы можете даже повозиться с ним, чтобы цитата появлялась при наведении курсора.

См. Ссылки на Pen
от CSS-Tricks (@ css-tricks)
на CodePen.

Ни один из этих вариантов не особо хорош. Если вам нужно процитировать источник, чтобы пользователи могли его увидеть и перейти к нему, вы должны сделать это в HTML и, возможно, с элементом , который мы рассмотрим далее.

Элемент цитирования

Тег следует использовать для ссылки на творческую работу, а не на человека, который сказал или написал цитату. Другими словами, это не для цитат. Вот примеры из спецификации :

  
 Моя любимая книга -  Дисфункция реальности  автора
Питер Ф. Гамильтон. Мой любимый комикс -  Pearls Before
Свинья  Стефана Пастиса. Мой любимый трек -  Jive.
Самба  от Cannonball Adderley Sextet.
  

Вот еще один пример:

См. Pen
Cite This! от CSS-Tricks (@ css-tricks)
на CodePen.

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

По умолчанию браузеры выделяют теги цитирования курсивом, и для использования элемента цитирования не требуется наличие или

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

Но где разместить элемент cite? Внутри? Снаружи? В перевернутом виде? Если мы поместим его внутри ,

или , мы сделаем его частью цитаты.Это запрещено спецификацией именно по этой причине.

  
<цитата>
  Цитата о раздаче кексов из статьи
   Статья 

Размещение его снаружи кажется неправильным, а также требует наличия закрывающего элемента, такого как

, если вы хотите стилизовать их вместе.

  

  <цитата>
    Цитата о раздаче кексов из статьи
  

Статья