HTML-тег <samp>
HTML-тег <samp> — строчный элемент для разметки примеров вывода программ и систем. Примеры использования на W3docs.
HTML-тег <samp> предназначен для разметки примеров вывода компьютерной программы, скрипта или системы — текста, который программа выводит пользователю. По умолчанию браузеры отображают его содержимое моноширинным шрифтом.
<samp> — это строчный фразовый элемент, а не блочный. Он встраивается в строку текста так же, как <em> или <code>, и не создаёт абзаца или отдельного блока. Если нужно отобразить многострочный блок вывода с сохранением переносов строк и пробелов, поместите элемент <samp> внутри элемента <pre>.
Когда использовать <samp>
<samp> — один из нескольких моноширинных «технических» элементов. Разница между ними семантическая, а не визуальная:
- Используйте
<code>для исходного кода — текста, который программист пишет. - Используйте
<samp>для вывода, который программа производит в ответ. - Используйте
<kbd>для клавиатурного ввода, который пользователь должен напечатать. - Используйте
<var>для переменной или имени-заполнителя.
Таким образом, правило выглядит следующим образом: если человек или другая программа это ввели — это <kbd> или <code>; если компьютер это вывел — это <samp>.
Если нужен живой контейнер, который JavaScript заполняет результатом вычисления, используйте элемент <output> — <samp> предназначен для представления вывода в виде статического размеченного текста.
Синтаксис
Тег <samp> используется парами. Содержимое записывается между открывающим (<samp>) и закрывающим (</samp>) тегами.
Примеры
Вывод команды и терминала
Распространённый случай — документирование того, что выводит команда. Здесь команда, которую вводит читатель, обёрнута в <kbd>, а ответ — в <samp>:
<!DOCTYPE html>
<html>
<head>
<title>Command output</title>
</head>
<body>
<p>Type <kbd>node --version</kbd> and you will see something like <samp>v20.11.1</samp>.</p>
<p>Full session:</p>
<pre><samp>$ npm run build
> [email protected] build
> next build
✓ Compiled successfully
Done in 4.21s.</samp></pre>
</body>
</html>При многострочном выводе, как в примере журнала сборки выше, <samp> помещается внутрь <pre>: <pre> сохраняет пробелы и переносы строк, а <samp> добавляет смысл («это вывод программы»).
Сообщение об ошибке приложения
<samp> также хорошо подходит для цитирования точного сообщения, которое система показывает пользователю:
<p>
If the upload fails, the application displays:
<samp>Error 413: Payload too large. Maximum file size is 25 MB.</samp>
</p><samp>, <code>, <kbd> и <var> рядом
Этот пример показывает четыре связанных элемента вместе, чтобы вы могли сравнить, как используется каждый из них:
<p>
Run <code>let total = price * qty;</code> where
<var>price</var> and <var>qty</var> are numbers.
Press <kbd>Enter</kbd> and the console prints
<samp>NaN</samp> if either variable is undefined.
</p>Атрибуты
Тег <samp> поддерживает глобальные атрибуты и атрибуты событий.
Стилизация <samp>
Моноширинный шрифт по умолчанию можно переопределить с помощью CSS, как правило через свойство font-family — однако приоритет могут иметь настройки браузера или таблицы стилей пользовательского агента. Распространённый подход — добавить примеру вывода ненавязчивый фон, чтобы он выделялся на фоне окружающего текста:
<!DOCTYPE html>
<html>
<head>
<style>
samp {
font-family: "Courier New", monospace;
background-color: #f4f4f4;
color: #c7254e;
padding: 2px 6px;
border-radius: 4px;
}
</style>
</head>
<body>
<p>The server responded with <samp>200 OK</samp>.</p>
</body>
</html>Доступность
<samp> не несёт специальной семантики для вспомогательных технологий — программы чтения с экрана объявляют его текст точно так же, как окружающий текст, и не говорят «пример вывода». Его ценность заключается для авторов и для стилизации, а не в роли дерева доступности. Не полагайтесь только на <samp>, чтобы донести до читателя, что перед ним вывод программы; если это различие важно, поясните его в видимом тексте (как в приведённых выше примерах с метками вроде «приложение отображает:»).