Когда нужно показать чужие слова или пример кода, обычный текст не подходит - здесь нужны отдельные теги: <blockquote> и <q> для цитат, <pre> и <code> для кода. Каждый по-своему меняет то, как браузер обращается с текстом внутри - от автоматических кавычек до сохранения пробелов и переносов строк.
В этом уроке
Попробуй убрать cite у blockquote или поменять отступы внутри pre - результат справа обновится сам, пробелы сохранятся ровно так, как ты их напишешь.
Блочная цитата: blockquote и cite
Тег <blockquote> оборачивает целый фрагмент чужого текста - обычно один или несколько абзацев, вынесенных отдельно от основного текста. Браузер по умолчанию сдвигает такой блок отступом. Необязательный атрибут cite может хранить адрес источника - но это метаданные для программ и поисковиков, читателю на странице этот адрес не виден. Если источник нужно показать глазами, для этого есть отдельный элемент <cite>, размещённый обычно рядом с цитатой, а не внутри неё.
<blockquote cite="https://example.com/source"><p>Текст цитаты.</p></blockquote> - cite указывает источник, но остаётся невидимым на странице.
<blockquote>Текст цитаты (источник: example.com)</blockquote> - указание источника затесалось прямо в текст цитаты, хотя должно стоять отдельно.
Строчная цитата: q и cite
Если цитата короткая и стоит прямо внутри предложения, для неё есть тег <q>: браузер сам добавляет кавычки вокруг текста внутри него, печатать кавычки вручную не нужно. Элемент <cite> здесь тоже уместен - им помечают название источника: книги, статьи или произведения, а не обязательно ссылку.
<p>Знакомый девиз вёрстки: <q>Простой код - надёжный код.</q></p> - браузер сам добавит кавычки нужного вида.
<p>Знакомый девиз вёрстки: "Простой код - надёжный код."</p> - кавычки просто напечатаны как текст, браузер не знает, что это цитата.
Код на странице: pre и code
Тег <code> помечает короткий фрагмент кода прямо внутри текста - примерно так, как в этом уроке помечено название каждого тега. Обычный HTML при этом схлопывает лишние пробелы и переносы строк в один пробел, поэтому многострочный пример так не покажешь. Для этого есть <pre>: он сохраняет пробелы и переносы строк ровно так, как они написаны в коде. Многострочный пример кода обычно оформляют связкой обоих тегов: <pre><code>...</code></pre>.
<pre><code><ul>
<li>Один</li>
</ul></code></pre> - отступы и переносы строк сохранятся точно как написано.
<p><ul><br> <li>Один</li><br></ul></p> - вручную расставлять br и неразрывные пробелы вместо pre - хрупкое решение, которое легко сломать следующей правкой.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Ожидать, что атрибут cite покажется на странице как видимый текст | cite - это метаданные-адрес для программ и поисковиков, читатель их не видит | Указывать источник видимым текстом отдельно, например через элемент cite рядом с цитатой |
| Печатать кавычки вручную вместо тега q | Браузер не понимает, что это именно цитата - кавычки остаются обычным текстом | Оборачивать короткую цитату внутри предложения в q - кавычки браузер добавит сам |
| Расставлять br и пробелы вручную вместо pre, чтобы сохранить многострочный код | Получается хрупкая разметка, которую легко сломать следующей правкой строки | Оборачивать многострочный пример в pre (обычно вместе с code) - отступы и переносы сохранятся сами |
| Ставить pre ради одного короткого фрагмента внутри обычного предложения | Получается разрыв строки там, где нужен просто инлайновый фрагмент кода | Для короткого фрагмента внутри текста достаточно code, pre - только для отдельных блоков |
Шпаргалка
| Термин | Значение |
|---|---|
| blockquote | Блочная цитата - выделяется отступом, оборачивает один или несколько абзацев |
| cite (атрибут) | Адрес источника цитаты - для программ/поисковиков, на странице не отображается |
| q | Строчная цитата внутри предложения - браузер сам добавляет кавычки |
| cite (элемент) | Название источника (книги, статьи, произведения) - видимый текст |
| pre + code | Многострочный код с сохранением отступов, обычно вместе: pre-код-code |
Коротко: отвечаем на вопросы
В чём разница между blockquote и q?
blockquote - для блочной цитаты: обычно это один или несколько абзацев, вынесенных отдельно от основного текста и сдвинутых отступом. q - для короткой цитаты внутри предложения: она остаётся инлайновой, а кавычки вокруг неё браузер добавляет сам.
Чем отличаются pre и code?
code просто помечает фрагмент как код, не трогая пробелы и переносы строк. pre - это блок, который сохраняет пробелы и переносы строк ровно так, как они написаны. Для многострочного примера кода их обычно используют вместе: pre снаружи, code внутри.
Почему кавычки вокруг q иногда выглядят не так, как ожидалось?
Браузер выбирает вид кавычек по языку страницы или элемента (атрибут lang) - для разных языков приняты разные кавычки. Для смешанного по языкам текста это может сработать не так, как ожидается, и по-разному в разных браузерах, поэтому многие сайты задают нужные кавычки явно через CSS, а не полагаются на выбор браузера.
