Тег <code>

Тег <code> (укр. — “код”) використовується в HTML для позначення фрагментів програмного коду або машинних команд. Він дозволяє логічно виділяти текст, який є частиною синтаксису певної мови програмування або коду в ширшому сенсі.

За замовчуванням браузери відображають текст у тегу <code> моноширинним шрифтом (monospace), що полегшує читання коду.

Атрибути

Специфічні атрибути

Тег <code> не має специфічних (унікальних) атрибутів.

Глобальні атрибути

Тег <code> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор елемента. Наприклад:
<p>Для виведення тексту в JavaScript використовуйте <code id="log-example">console.log()</code>.</p>
  • class —задає класи для стилізації через CSS. Наприклад:
<p>Команда: <code class="terminal">npm install</code></p>
  • style — дозволяє додати інлайн-стилі. Наприклад:
<p>Код: <code style="color: green;">return true;</code></p>
  • дає можливість вивести підказку при наведенні курсору. Наприклад:
<p>Синтаксис: <code title="Оператор присвоєння">=</code></p>
  • lang — вказує мову вмісту елемента (корисно, якщо вказується мова програмування в семантичній розмітці або при парсингу контенту):
<p>Функція на Python: <code lang="python">def func():</code></p>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання code</title>
    <style>
        code {
            background-color: #f4f4f4;
            padding: 2px 4px;
            border-radius: 4px;
            font-family: Consolas, monospace;
        }
    </style>
</head>
<body>
    <h2>Приклад коду:</h2>
    <p>Для виведення тексту у консоль JavaScript використовуйте команду: <code>console.log("Hello World");</code></p>
</body>
</html>

Додаткові моменти

  • Тег <code> відображає лише невеликі фрагменти коду, які вбудовані у текст.
  • Для більших блоків коду рекомендується поєднувати <pre> + <code>, щоб зберегти форматування.
  • Тег не надає підсвічування синтаксису — для цього використовуються зовнішні бібліотеки.
  • Підвищує семантику документа, полегшує обробку контенту SEO-роботами та скрінрідерами.
  • Повністю підтримується усіма сучасними браузерами.