Справочник HTML

Теги <code> и <pre>: показываем код правильно

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

Рабочий пример

<p>Свойство <code>display</code> меняет тип отображения.</p>
<pre><code>&lt;button type="button"&gt;Нажать&lt;/button&gt;</code></pre>

Угловые скобки внутри примера нужно заменить сущностями &lt; и &gt;, иначе браузер воспримет их как настоящие теги. Длинному блоку кода полезно разрешить горизонтальную прокрутку.

Когда применять

Короткие имена функций и команд оставляй строчными через code. Большой пример помещай в pre и добавляй пояснение до или после, чтобы читатель понимал цель кода.

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

Частые ошибки

• Использовать pre только ради отступов
• Не экранировать HTML внутри примера
• Уменьшать шрифт кода до нечитаемого размера