Цитаты и код

Учимся правильно оформлять цитаты и показывать фрагменты кода на странице.

<blockquote> — для цитат, <code> — для кода в строке, <pre> — чтобы сохранить пробелы и переносы.

Цитата — <blockquote>

Когда вы приводите чужие слова блоком, используют <blockquote>. Браузер обычно делает отступ слева, визуально отделяя цитату:

<blockquote>
  <p>Любая достаточно развитая технология неотличима от магии.</p>
</blockquote>

Для короткой цитаты внутри предложения есть <q> — браузер сам добавит кавычки вокруг текста.

Инлайн-код — <code>

Когда нужно вставить кусочек кода прямо в предложение — имя тега, команду, название функции — его оборачивают в <code>. Браузер показывает такой текст моноширинным шрифтом:

<p>Чтобы создать абзац, используйте тег <code>&lt;p&gt;</code>.</p>

Кстати, заметьте: чтобы показать сам тег <p> как текст, символы < и > пришлось записать сущностями. Об этом — ниже.

Блок кода — <pre> и <code>

Обычно браузер схлопывает пробелы и переносы. Но в коде они важны — отступы и строки несут смысл. Тег <pre> (preformatted) сохраняет форматирование как есть. Для многострочного кода <pre> и <code> используют вместе:

<pre><code>function hello() {
  console.log("Привет");
}</code></pre>

Внутри <pre> все пробелы и переносы сохранятся, и код отобразится ровно так, как написан.

HTML-сущности

Чтобы показать на странице сами символы < и > (а не воспринять их как теги), используют сущности — специальные коды:

Символ	Сущность
<	`<`
>	`>`
&	`&`
неразрывный пробел	` `

Это особенно важно, когда вы пишете статью про HTML и хотите показать теги как текст — иначе браузер воспримет их как разметку и «съест».

code и pre — не одно и то же

Новички часто путают эти два тега, поэтому закрепим разницу. <code> отвечает за смысл: «это фрагмент кода». <pre> отвечает за форматирование: «сохрани пробелы и переносы как есть». Это разные задачи, поэтому их часто используют вместе:

<code> без <pre> — короткий код в строке текста (имя тега, название функции).
<pre> + <code> — многострочный блок кода: и смысл обозначен, и отступы сохранены.

Кстати, именно в такие блоки <pre><code> на этом сайте обёрнуты все примеры кода, которые вы видите в уроках. Подсветка и кнопка «копировать» добавляются уже поверх — это работа CSS и скриптов, а основа всегда одна и та же.

Итог

<blockquote> — блочная цитата, <q> — короткая цитата в строке.
<code> — код в строке; <pre> + <code> — многострочный блок с сохранением форматирования.
Чтобы показать <, >, & как символы, используют сущности <, >, &.