HTML предоставляет несколько инструментов для отображения кода и преформатированного текста на веб-страницах.

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

Тег <code> - Фрагмент кода

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

<p>Для вывода текста в консоли JavaScript используется <code>console.log()</code>.</p>

Такой код создаст следующий вывод:

Для вывода текста в консоли JavaScript используется console.log().

Тег <pre> - Преформатированный текст

Тег <pre> используется для отображения текста так, как он написан в исходном коде, с учетом всех пробелов и переносов строк. Это особенно полезно, когда вы хотите отобразить структуру и форматирование кода.

<pre>
 function greet() {
     console.log("Hello, World!");
 }
</pre>

В этом примере код будет отображаться с отступами и форматированием:

function greet() {
   console.log("Hello, World!");
}

Комбинированное использование

Когда вам нужно вставить фрагмент кода в текст и сохранить его форматирование, можно комбинировать <code> и <pre>.

<p>Пример JavaScript функции:</p>
<pre>
 <code>
   function calculateSum(a, b) {
       return a + b;
   }
 </code>
</pre>

Этот код создает блок с отформатированным текстом и фрагментом кода:

Пример JavaScript функции:
function calculateSum(a, b) {
   return a + b;
}

Заключение

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