Etiqueta samp en HTML: salida de programas y sistemas

La etiqueta <samp> en HTML representa una muestra de salida de un programa o sistema informático. Sirve para documentar lo que responde una aplicación: una confirmación, un resultado en la terminal o un mensaje de error. Úsala cuando quieras citar esa respuesta dentro de una explicación, distinguiéndola de lo que escribe el usuario.

Ejemplo mínimo de samp

<p>El sistema respondió: <samp>Archivo guardado.</samp></p>

Verás «El sistema respondió: Archivo guardado.», normalmente con el mensaje en una fuente monoespaciada. <samp> identifica «Archivo guardado.» como salida del sistema; el resto del párrafo explica su procedencia.

Para probarlo, pega el fragmento dentro del <body> de un documento HTML con codificación UTF-8, guarda el archivo y ábrelo en el navegador. El mensaje ya está escrito: abrir la página no guarda un archivo ni comprueba que una operación haya terminado.

La fuente monoespaciada es una presentación habitual, no el motivo para elegir la etiqueta. Aunque cambies la tipografía con CSS, <samp> seguirá identificando una salida del sistema.

Sintaxis y contexto válido

Escribe una apertura <samp> y un cierre </samp>: ninguno se puede omitir. Se coloca donde se admite contenido de frase, por ejemplo dentro de un párrafo, un elemento de lista o un <pre>. También admite contenido de frase en su interior, como texto y un <span> para señalar una parte del mensaje. No envuelvas párrafos, listas ni tablas completas con <samp>.

El modelo de contenido del HTML Living Standard separa su función de la presentación. <samp> no conserva por sí solo varios espacios ni saltos de línea: para una transcripción donde importen, combínalo con <pre>.

Los caracteres del mensaje siguen las reglas de HTML. Para mostrar un signo <, escribe <; para un &, escribe &. Poner etiquetas dentro de <samp> no las convierte automáticamente en texto literal.

Samp frente a kbd, code y output

Elige según el papel del texto:

• <kbd> representa una entrada del usuario, como el comando que debe escribir.
• <samp> representa la respuesta de un programa o sistema a esa entrada.
• <code> representa un fragmento de código, por ejemplo una expresión que estás explicando.
• <output> representa el resultado de un cálculo o una acción del usuario en una aplicación, como el total de una calculadora web.

En una instrucción de terminal, marca el comando con <kbd> y su respuesta con <samp>, como en el siguiente ejemplo. copias guardar notas.txt es una entrada cuando indicas que se escriba; si analizas su sintaxis como código, puede corresponder <code>. La respuesta «Archivo guardado: notas.txt» sigue siendo una salida. Una apariencia monoespaciada compartida no vuelve intercambiables estos significados.

Caso práctico: una sesión ficticia de terminal

Esta página documenta dos operaciones de un programa imaginario llamado copias. Los comandos y las respuestas son una transcripción de ejemplo; no necesitas instalar un programa ni crear los archivos mencionados para verla.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Transcripción de una terminal</title>
    <style>
      body {
        margin: 1rem;
        font-family: system-ui, sans-serif;
        line-height: 1.6;
      }
      pre {
        padding: 1rem;
        border: 1px solid currentColor;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      samp.error {
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <h1>Guardar y abrir archivos</h1>
    <p>Sesión ficticia: cada comando va seguido de su respuesta.</p>
    <pre><kbd>copias guardar notas.txt</kbd>
<samp>Archivo guardado: notas.txt</samp>
<kbd>copias abrir pendiente.txt</kbd>
<samp class="error">Error: no existe pendiente.txt.</samp></pre>
    <p>Primero se confirma el guardado de notas.txt.
      Después se informa de que pendiente.txt no existe.</p>
  </body>
</html>

Guarda el código completo en UTF-8 como sesion-terminal.html y ábrelo en el navegador. No requiere servidor, JavaScript ni archivos adicionales. Verás un título, cuatro líneas enmarcadas y una explicación. El mensaje que comienza por «Error» aparecerá en negrita por CSS.

El flujo se lee así:

1. copias guardar notas.txt es la entrada, identificada con <kbd>.
2. «Archivo guardado: notas.txt» es la respuesta, identificada con <samp>.
3. copias abrir pendiente.txt es otra entrada.
4. «Error: no existe pendiente.txt.» es la segunda respuesta. La explicación posterior resume ambas operaciones sin depender de la fuente o la negrita.

<pre> conserva los saltos y los espacios escritos; white-space: pre-wrap permite además ajustar las líneas al ancho disponible. Si quitas el CSS, la transcripción conserva sus líneas, pero desaparecen el marco y la negrita añadidos. Si retiras <pre> conservando sus hijos, con los estilos normales los saltos escritos en el HTML se compactarán como espacios.

Si cambias el nombre del archivo, actualiza tanto el comando como su respuesta y la explicación. Retirar solo <samp> mantiene el texto, pero elimina su significado de salida. Sustituirlo por <kbd> convertiría semánticamente la respuesta en una entrada del usuario.

Mensajes de error y avisos que cambian

Una transcripción documenta un mensaje que ya se produjo. Si estás mostrando el estado de una aplicación mientras se usa, considera también cómo se anunciarán las actualizaciones: role="status" puede servir para estados informativos. Para avisos urgentes, consulta el patrón de alerta de WAI-ARIA. La sesión ficticia de esta guía se lee como documentación y no requiere esos anuncios.

Atributos y accesibilidad

<samp> no tiene atributos específicos. Admite los atributos globales de HTML. En el caso práctico, class="error" permite aplicar negrita a la respuesta que queremos destacar.

Explica con palabras qué escribió el usuario y qué respondió el sistema. La fuente monoespaciada suele ser la misma para ambos, y los lectores de pantalla no siempre anuncian estas etiquetas.

Errores frecuentes y preguntas

¿En qué difiere de code? <samp> cita una salida producida; <code> identifica código. El mensaje «Archivo guardado.» es una respuesta, aunque ambos elementos suelan usar una fuente monoespaciada.

¿Puedo usar samp para cualquier texto monoespaciado? Elígelo cuando el texto sea salida de un sistema. Para cambiar únicamente la tipografía, aplica font-family con CSS a un contenedor apropiado.

¿Por qué desaparecen los saltos de línea? Comprueba si el mensaje está dentro de <pre> y si alguna regla CSS cambia white-space. <samp> por sí solo no preserva el formato de una terminal.

Compatibilidad y fuentes

<samp> está disponible en los motores de los navegadores actuales, según el HTML Living Standard. La referencia de MDN complementa su presentación habitual y compatibilidad. Su soporte no garantiza una apariencia idéntica ni un anuncio particular en tecnologías de asistencia.

Fuentes consultadas el 3 de octubre de 2026: HTML Living Standard para significado, contexto y atributos; MDN para presentación y compatibilidad; WAI para los avisos dinámicos. Los ejemplos son documentos estáticos y funcionan sin JavaScript.