Etiqueta HTML <samp>
La etiqueta HTML <samp> es un elemento en línea que marca la salida de muestra de un programa o sistema. Aprende cuándo y cómo usarla con ejemplos.
La etiqueta HTML <samp> marca la salida de muestra de un programa informático, script o sistema — el texto que un programa devuelve al usuario. Por defecto, los navegadores renderizan su contenido con una fuente monoespaciada.
<samp> es un elemento de fraseo en línea, no un bloque. Fluye dentro de una línea de texto igual que <em> o <code>, y no crea un salto de párrafo ni una caja propia. Si necesitas mostrar un bloque de salida de varias líneas preservando los saltos de línea y el espaciado, envuelve el elemento <samp> dentro de un elemento <pre>.
Cuándo usar <samp>
<samp> es uno de varios elementos "técnicos" monoespaciados, y la diferencia entre ellos es semántica, no visual:
- Usa
<code>para código fuente — el texto que un programador escribe. - Usa
<samp>para la salida que produce un programa en respuesta. - Usa
<kbd>para la entrada de teclado que se espera que el usuario escriba. - Usa
<var>para un nombre de variable o marcador de posición.
La regla general es: si un humano u otro programa lo escribió, es <kbd> o <code>; si la computadora lo imprimió, es <samp>.
Si quieres un contenedor activo que JavaScript rellene con el resultado de un cálculo, usa el elemento <output> en su lugar — <samp> sirve para representar la salida como texto estático marcado.
Sintaxis
La etiqueta <samp> va en pares. El contenido se escribe entre las etiquetas de apertura (<samp>) y cierre (</samp>).
Ejemplos
Salida de comandos y terminal
Un uso común es documentar lo que imprime un comando. Aquí el comando que escribe el lector se envuelve en <kbd>, y la respuesta se envuelve en <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 salidas de varias líneas como el registro de compilación anterior, <samp> se coloca dentro de <pre>: <pre> preserva el espacio en blanco y los saltos de línea, mientras que <samp> añade el significado ("esto es salida del programa").
Un mensaje de error de una aplicación
<samp> también es una buena opción para citar el mensaje exacto que muestra un sistema al usuario:
<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> y <var> uno al lado del otro
Este ejemplo muestra los cuatro elementos relacionados juntos para que puedas comparar cómo se usa cada uno:
<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
La etiqueta <samp> admite los atributos globales y los atributos de evento.
Estilizar <samp>
La fuente monoespaciada predeterminada puede sobreescribirse con CSS, normalmente mediante la propiedad font-family — aunque las preferencias del navegador o las hojas de estilo del agente de usuario pueden tener prioridad. Un patrón habitual es dar a la salida de muestra un fondo sutil para que destaque del texto circundante:
<!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>Accesibilidad
<samp> no tiene semántica especial para la tecnología de asistencia — los lectores de pantalla anuncian su texto exactamente igual que el texto circundante y no dicen "salida de muestra." Su valor es para los autores y para el estilizado, no para un rol en el árbol de accesibilidad. No dependas únicamente de <samp> para transmitir que algo es una salida; si esa distinción es importante para el lector, aclárala también en el texto visible (como hacen los ejemplos anteriores con etiquetas como "la aplicación muestra:").