skip to main content

<blockquote>

html

Кратко 🔗

Для вставки большой цитаты на страницу есть специальный семантичный тег <blockquote>. Слово большой выделено, потому что для цитаты, которая скрывается в дебрях текста (внутристрочная) есть свой отдельный тег — <q>. Но сейчас не об этом 😉

Пример 🔗

<blockquote>
<p>
Ваша работа заполнит большую часть жизни и единственный способ быть
полностью довольным — делать то, что по-вашему является великим делом. И
единственный способ делать великие дела — любить то, что вы делаете.
</p>
</blockquote>

Как пишется 🔗

Перед цитатой открываем тег <blockquote>, а после цитаты его закрываем. Изи!

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

Существует правило хорошего тона указывать источник, откуда цитата была взята. Тут вам два способа на выбор:

Атрибут cite — указывается после имени тега в открывающей части. Пример:

<blockquote cite="http://www.vothouse.ru/points/citaty-steve-jobs.html">
<p>
Ваша работа заполнит большую часть жизни и единственный способ быть
полностью довольным — делать то, что по-вашему является великим делом. И
единственный способ делать великие дела — любить то, что вы делаете.
</p>
</blockquote>

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

<blockquote>
<p>
Ваша работа заполнит большую часть жизни и единственный способ быть
полностью довольным — делать то, что по-вашему является великим делом. И
единственный способ делать великие дела — любить то, что вы делаете.
</p>
<footer>— Стив Джобс, <cite>Речь в Стенфорде</cite></footer>
</blockquote>

Да, у цитаты может быть свой футер, подвал. Именно в нём принято указывать автора цитаты.

В теге <cite> или в атрибуте cite указывается именно источник цитаты, а не её автор!

Атрибуты 🔗

К тегу <blockquote> можно применить любые глобальные атрибуты + атрибут источника цитаты cite.

Подсказки 🔗

💡 Сам по себе тег не размечает текст. Только показывает поисковым роботам и скринридерам, где на странице находится блок цитаты. Не забывайте про семантичные теги для разметки текста внутри.

💡 При добавлении этого тега в разметку визуально ничего не изменится. Кавычки придётся добавлять самостоятельно 🙄

💡 В теге или атрибуте cite указывается ссылка на источник, а не автор.

💡 Это блочный элемент, обёрнутая в него цитата будет начинаться с новой строки.

В работе 🔗

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

.quote {
position: relative;
}

.quote::before {
content: "“";
position: absolute;
left: 5rem;
top: 5rem;
font-family: sans-serif;
}

Автор: Алёна,