Тег <code>: фрагменты программного кода
Как отличить имя свойства от обычного текста и безопасно показать HTML как пример.
Зачем нужен этот элемент
code обозначает программный код: имя функции, CSS-свойство, команду или небольшой фрагмент разметки. По умолчанию он обычно получает моноширинный шрифт. Сам тег не выполняет содержимое и не включает подсветку синтаксиса.
При показе HTML символы угловых скобок нужно экранировать. Иначе браузер воспримет их как настоящие элементы страницы. Для многострочного фрагмента code часто помещают в pre, который сохраняет пробелы и переносы.
Синтаксис и пример
<p>Добавьте <code><a href="#section"></code> для перехода к разделу.</p>
<pre><code>.card {
padding: 24px;
}</code></pre>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| < и > | Способ показать угловые скобки текстом. |
| pre + code | Обычная комбинация для многострочных примеров. |
| Подсветка | Дополнительное оформление, не функция самого тега. |
Частая ошибка
Не вставляйте в HTML непроверенный пользовательский код как разметку. Для отображения используйте экранирование или textContent; выполнение должно происходить в отдельной защищённой среде.
Небольшая практика
Покажите в абзаце тег ссылки как текст. В результате должен быть виден код с угловыми скобками, а не появляться новая кликабельная ссылка.
Разберите также <pre>, <p>: эти элементы пригодятся в том же интерфейсе.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.