❌ Эта статья об устаревшем теге, спецификация HTML не рекомендует использовать его в веб-разработке.

Что делает тег

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

Синтаксис тега <samp>

<samp>Здесь текст, который нужно показать как программный код</samp>

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

Тег <samp> является устаревшим, начиная с HTML 5. Его поведение было определено в спецификации HTML 4.01.

Семантический или нет

Тег <samp> не считается семантическим, так как не придаёт никакого конкретного значения содержимому.

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

Показать пользователю пример кода:

<p>Введите свои учетные данные:</p>
<label for="username">Имя пользователя:</label>
<input type="text" id="username">>
<br>
<label for="password">Пароль:</label>
<input type="password" id="password">>
<br>
<button>Войти</button>

<p>Пример выходных данных:</p>
<samp>
Добро пожаловать, <username>!
Последний раз вы входили: <last_login_time>.
</samp>

Показать пример вывода командной строки:

<p>Выполните следующие команды:</p>
<samp>
$ cd my_project
$ npm install
$ npm start
</samp>

Показать пример запроса к API:

<p>Пример запроса к API:</p>
<samp>
GET /api/products HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://example.com/
</samp>

Для чего использовать тег <samp>

  • Отображение командной строки.
  • Отображение кода.
  • Отображение примера вывода.
  • Отображение входных данных.
  • Отображение выходных данных.

Атрибуты тега <samp>

Тег <samp> не имеет специфичных атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <samp> не имеет особых ограничений, но следует помнить, что он используется только для отображения текста, а не для передачи информации. Если необходимо передать данные на сервер, нужно использовать другие теги, такие как <input> или <textarea>.

Нюансы

  • Тег предназначен только для отображения текста, а не для передачи информации.
  • Если нужно отобразить большой объем кода, лучше использовать тег <pre> вместо <samp>.

Поддержка браузерами

Тег <samp> поддерживается всеми современными браузерами.

Актуальная информация — на caniuse.

Альтернативные теги

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


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023