HTML тег <blockquote>
Изучите HTML тег <blockquote> для цитирования текста из другого источника, атрибут cite, оформление с <footer> и стилизацию.
HTML тег <blockquote> обозначает блок текста, цитируемого из другого источника — статьи, книги, речи или другого веб-сайта. Это семантический элемент, а не инструмент стилизации: он сообщает браузерам, поисковым системам и вспомогательным технологиям, что вложенное содержимое является цитатой, что может влиять на индексацию страницы и способ объявления текста пользователям программ чтения с экрана.
По умолчанию браузеры отображают <blockquote> с левым и правым отступами. Этот отступ — лишь удобство, а не назначение элемента. Использование <blockquote> исключительно для создания отступа текста является антипаттерном — это добавляет ложный смысл в разметку. Если нужен только визуальный отступ, используйте CSS (margin, padding) для <div> или <p>.
<blockquote> — блочный элемент, который может содержать другие блочные элементы: абзацы, списки, заголовки и <footer> для атрибуции. Он размещается внутри тега <body>.
Когда использовать <blockquote>, а когда <q>
Используйте <blockquote> для длинных самостоятельных цитат, образующих отдельный блок. Используйте строчный тег <q> для коротких цитат, встроенных в предложение — браузеры автоматически оборачивают содержимое <q> в кавычки, тогда как <blockquote> кавычки не добавляет.
Для коротких строчных цитат внутри абзаца используйте тег <q>.
Синтаксис
Тег <blockquote> является парным. Содержимое записывается между открывающим (<blockquote>) и закрывающим (</blockquote>) тегами.
Пример HTML тега <blockquote>:
HTML тег <blockquote>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
</body>
</html>Паттерн атрибуции: <blockquote> с <footer> и <cite>
Одиночный тег <blockquote> не указывает читателю, кто произнёс слова и откуда взята цитата. Рекомендуемый доступный способ атрибуции цитаты — добавить после неё <footer> с видимым элементом <cite> для обозначения источника:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>
— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite>
</footer>
</blockquote>
</body>
</html>Элемент <cite> по умолчанию отображается курсивом и указывает цитируемое произведение. Поскольку он является частью текста страницы, его видят все читатели — в отличие от атрибута cite у <blockquote>, который описывается ниже.
Пример HTML тега <blockquote>, используемого вместе с тегом <q>:
Пример HTML тега <blockquote> с HTML тегом <q>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| cite | URL | Указывает исходный документ или сообщение, из которого взята цитата. Значение может быть относительным или абсолютным URL. |
Тег <blockquote> также поддерживает глобальные атрибуты и атрибуты событий.
Атрибут cite доступен только машинам
Легко перепутать атрибут cite с элементом <cite>. Ключевое ограничение атрибута cite состоит в том, что его URL не отображается пользователям — браузеры не рендерят его как видимую ссылку. Он существует только для машин: поисковых систем, скриптов и других инструментов, читающих исходный код страницы.
<blockquote cite="https://example.com/source">
This URL is in the markup, but no reader will ever see or click it.
</blockquote>Именно поэтому атрибут cite не является заменой видимой атрибуции. Чтобы указать источник для читателей-людей, добавьте видимый элемент <cite> (обычно внутри <footer>, как показано выше). Используйте оба варианта вместе: атрибут — для машин, элемент — для людей.
Доступность
Программы чтения с экрана, как правило, не объявляют <blockquote> как цитату и полностью игнорируют атрибут cite. Поэтому если единственное, что обозначает текст как цитату, — это отступ или атрибут cite, незрячий пользователь не имеет возможности узнать, что текст процитирован.
Практические выводы:
- Дополняйте каждый
<blockquote>видимой атрибуцией (с<footer>и<cite>), чтобы источник был частью читаемого содержимого. - Не полагайтесь только на атрибут
citeдля указания источника. - Никогда не используйте
<blockquote>для не цитируемого содержимого ради отступа — это вводит в заблуждение пользователей программ чтения с экрана и поисковые системы.
Стилизация тега <blockquote>
По умолчанию браузеры добавляют <blockquote> отступы в виде margin. Распространённый подход — убрать этот стандартный отступ и добавить цветную левую рамку, padding и курсив, чтобы цитата выделялась:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
margin: 1em 0;
padding: 0.5em 1.5em;
border-left: 4px solid #1c8d27;
background-color: #f4f4f4;
font-style: italic;
color: #333;
}
blockquote footer {
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite></footer>
</blockquote>
</body>
</html>Для управления только отступами используйте сокращённое свойство margin-left, margin-right или margin.