1. HTML и CSS
  2. Оформление цитаты (q, cite, blockquote)

Оформление цитаты (q, cite, blockquote)

Тег <q>

Тег <q> выделяет цитату в тексте.

<p>Цитату <q>Быть или не быть</q> произносит Гамлет</p>

Браузер автоматически подставляет кавычки. Если в теге <html lang="ru"> указан язык, то браузер подставляет кавычки в зависимости от языка. По умолчанию ставятся кавычки для английского языка.

При необходимости можно указать свои кавычки.

q:before {
  content: "\00ab";
}

q:after {
  content: "\00bb";
}

Пример кода:

Тег <cite>

Тег <cite> используют, когда надо выделить источник (название творческой работы, например книга, игра, фильм).

<p>Цитату <q>Быть или не быть</q> произносит Гамлет в пьесе <cite>Гамлет</cite></p>

Пример кода:

Стоит обратить внимание, что тегом <cite> обозначается именно источник цитаты, а не автор.

Тег <blockquote>

Тег <blockquote> выносит цитату на отдельную строку.

<blockquote>
  Быть или не быть.
</blockquote>

Пример кода:

Если к цитате надо добавить источник, то обычно это делают в связке с <figcaption>.

<figure>
  <blockquote>
    Быть или не быть.
  </blockquote>
  <figcaption>Цитата из произведения <cite>Гамлет</cite></figcaption>
</figure>

Пример кода:

Стоит отметить, что <cite> должна быть вне тега <blockquote>.

<!-- ❌ неправильно, тег <cite> внутри <blockquote> -->
<blockquote>
  <p>Быть или не быть.</p>
  <p>Цитата из произведения <cite>Гамлет</cite></p>
</blockquote>