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>
  <p>Быть или не быть.</p>
</blockquote>
<p>Пьеса <cite>Гамлет</cite></p>

Пример кода:

Быть или не быть.

Пьеса Гамлет