Tag HTML <samp>
A tag HTML <samp> é um elemento inline que marca a saída de exemplo de um programa ou sistema. Aprenda quando e como usá-la com exemplos do W3Docs.
A tag HTML <samp> marca a saída de exemplo de um programa de computador, script ou sistema — o texto que um programa exibe de volta ao usuário. Por padrão, os navegadores renderizam seu conteúdo em fonte monoespaçada.
<samp> é um elemento de frase inline, não um bloco. Ele flui dentro de uma linha de texto assim como <em> ou <code>, e não cria uma quebra de parágrafo nem uma caixa própria. Se você precisar exibir um bloco de saída com várias linhas preservando quebras de linha e espaçamento, envolva o elemento <samp> dentro de um elemento <pre>.
Quando usar <samp>
<samp> é um dos vários elementos "técnicos" monoespaçados, e a diferença entre eles é semântica, não visual:
- Use
<code>para código-fonte — o texto que um programador escreve. - Use
<samp>para a saída que um programa produz em resposta. - Use
<kbd>para entrada de teclado que o usuário deve digitar. - Use
<var>para o nome de uma variável ou espaço reservado.
Portanto, a regra geral é: se um humano ou outro programa digitou, é <kbd> ou <code>; se o computador imprimiu, é <samp>.
Se você quiser um contêiner dinâmico que JavaScript preenche com o resultado de um cálculo, use o elemento <output> — <samp> é para representar saída como texto estático e marcado.
Sintaxe
A tag <samp> vem em pares. O conteúdo é escrito entre as tags de abertura (<samp>) e fechamento (</samp>).
Exemplos
Saída de comando e terminal
Um uso comum é documentar o que um comando imprime. Aqui, o comando que o leitor digita é envolvido em <kbd>, e a resposta é envolvida em <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>Para saídas com várias linhas, como o log de build acima, <samp> é colocado dentro de <pre>: <pre> preserva os espaços em branco e as quebras de linha, enquanto <samp> adiciona o significado ("esta é a saída do programa").
Uma mensagem de erro de aplicação
<samp> também é adequado para citar exatamente a mensagem que um sistema exibe ao usuário:
<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> e <var> lado a lado
Este exemplo mostra os quatro elementos relacionados juntos para que você possa comparar como cada um é usado:
<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>Atributos
A tag <samp> suporta os atributos globais e os atributos de evento.
Estilizando <samp>
A fonte monoespaçada padrão pode ser substituída com CSS, geralmente por meio da propriedade font-family — embora as preferências do navegador ou as folhas de estilo do agente de usuário possam ter prioridade. Um padrão comum é dar à saída de exemplo um fundo sutil para destacá-la do texto ao redor:
<!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>Acessibilidade
<samp> não carrega semântica especial para tecnologia assistiva — leitores de tela anunciam seu texto exatamente como o texto ao redor e não dizem "saída de exemplo". Seu valor é para autores humanos e para estilização, não para um papel na árvore de acessibilidade. Não dependa de <samp> sozinho para transmitir que algo é uma saída; se essa distinção for importante para o leitor, deixe-a clara no texto visível também (como os exemplos acima fazem com rótulos como "a aplicação exibe:").