Тег <samp> в HTML — вивід програми моноширинним шрифтом

<h3>Приклад використання тегу samp</h3>
<p>CSS
Каскадні таблиці стилів (англ. Cascading Style Sheets - CSS).<br>

Мова для запису стильового оформлення веб-сторінок.

Колір тла, розмір літер та найрізноманітніші візуальні ефекти створюються за допомогою CSS.<br><br>
  CSS приклад:
  <br><samp>
body {  
     <pre>   background-color: lightblue;  
}  
h1 {  
   color: white;  
   text-align: center;  
}  
p {  
    font-family: verdana;  
    font-size: 20px;  
  }  <br></pre></samp>
</p>

HTML

<h4>Хто є хто</h4>
<p>Виконайте <code>npm run build</code>, натисніть <kbd>Ctrl</kbd> + <kbd>C</kbd>
    для зупинки. Замість <var>назва</var> підставте ім'я свого проєкту.
    Якщо все добре, з'явиться <samp>Build finished in 3.2s</samp>.</p>

<h4>Пастка перша: переноси рядків зникають</h4>
<p class="label">Просто samp — три рядки злиплися в один:</p>
<samp class="plain">Error: cannot find module
  at Object.resolve (internal/modules)
  at require (internal/modules/cjs)</samp>

<p class="label">Той самий вивід усередині pre — переноси на місці:</p>
<pre><samp>Error: cannot find module
  at Object.resolve (internal/modules)
  at require (internal/modules/cjs)</samp></pre>

<p class="label">І те саме без pre, самою властивістю white-space:</p>
<samp class="wrapped">Error: cannot find module
  at Object.resolve (internal/modules)
  at require (internal/modules/cjs)</samp>

<h4>Пастка друга: розмір шрифту</h4>
<div class="default-size">
    <p>Тут розмір тексту не задано явно, і типовий
        <samp>вивід програми</samp> помітно дрібніший за сусідні букви;
        полагоджений <samp class="fixed">вивід програми</samp> — ні.</p>
</div>
<p class="label">А в цьому абзаці розмір тексту задано явно, і різниці вже немає:
    <samp>вивід програми</samp> — такий самий, як букви навколо.</p>

CSS

p {
    max-width: 560px;
}

.label {
    margin: 14px 0 4px;
    color: #5a6472;
    font-size: .9em;
}

samp {
    background: #f4f6fa;
    border-radius: 3px;
    padding: 0 4px;
}

pre {
    margin: 0;
    padding: 8px 10px;
    border-radius: 4px;
    background: #f4f6fa;
    overflow-x: auto;
}

pre samp {
    background: none;
    padding: 0;
}

.plain,
.wrapped {
    display: block;
    padding: 8px 10px;
}

.wrapped {
    white-space: pre-wrap;
}

.default-size {
    font-size: medium;
    padding: 0 10px;
    border-left: 4px solid #f2b134;
}

.fixed {
    font-family: monospace, monospace;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

kbd {
    padding: 1px 6px;
    border: 1px solid #b9c6d8;
    border-bottom-width: 3px;
    border-radius: 4px;
    background: #fff;
}