<samp> HTML-элемент примера вывода

Элемент <samp> HTML используется для заключения в него встроенного текста, представляющего пример (или цитату) вывода компьютерной программы. Его содержимое обычно отображается стандартным моноширинным шрифтом браузера (например, Courier или Lucida Console).

Попробуйте

<p>I was trying to boot my computer, but I got this hilarious message:</p>

<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

samp {
  font-weight: bold;
}

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания по использованию

С помощью правила CSS можно переопределить стандартный шрифт браузера для элемента <samp>; однако настройки браузера могут иметь приоритет над указанными вами правилами CSS.

Правило CSS для переопределения стандартного шрифта выглядит так:

samp {
  font-family: "Courier";
}

Примеры

Простой пример

В этом простом примере абзац содержит пример вывода программы.

<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>

Результат

Пример вывода, содержащий пользовательский ввод

Вы можете вложить элемент <kbd> в блок <samp>, чтобы показать пример, содержащий текст, введённый пользователем. Например, рассмотрим этот текст, представляющий собой расшифровку сеанса консоли Linux (или macOS):

HTML

<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>

Обратите внимание на использование элемента <span>, позволяющего настроить внешний вид отдельных фрагментов примера, таких как приглашение командной оболочки и курсор. Также обратите внимание на использование <kbd> для обозначения команды, введённой пользователем в приглашении в примере.

CSS

Правила CSS, задающие нужный нам внешний вид:

.prompt {
  color: #bb0000;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #0000bb;
}

Это придаёт приглашению и курсору довольно ненавязчивый цвет и выделяет полужирным ввод с клавиатуры в примере.

Результат

В результате получается следующее:

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Связанные элементы: <kbd>, <code>, <pre>
• Элемент <output>: контейнер для вывода, сгенерированного скриптом