La Etiqueta SAMP

Se utiliza para representar salida de muestra de un programa o sistema informático. Es una etiqueta semántica que ayuda a diferenciar el texto generado por una computadora del texto normal, como mensajes de consola, resultados de comandos o alertas de software.

La etiqueta <samp> en HTML (abreviatura de "sample") se utiliza para representar salida de muestra de un programa o sistema informático. Es una etiqueta semántica que ayuda a diferenciar el texto generado por una computadora del texto normal, como mensajes de consola, resultados de comandos o alertas de software. Aquí te explicamos cómo usarla correctamente.

Sintaxis básica

La estructura básica es:

<samp>Texto de ejemplo generado por un programa</samp>

Ejemplo:

<p>
   Al ejecutar el comando, verás: <samp>Archivo no encontrado</samp>.
</p>

Resultado:

Al ejecutar el comando, verás: Archivo no encontrado.

Por defecto, los navegadores muestran el texto en una fuente monoespaciada (como Courier New).

Casos de uso comunes

a) Salida de comandos

<pre>
<samp>$ git status
On branch main
nothing to commit, working tree clean</samp>
</pre>

Resultado:

$ git status On branch main nothing to commit, working tree clean

b) Mensajes de error

<p>
   Error: <samp>Timeout: conexión rechazada</samp>.
</p>

c) Resultados de programas

<p>
   La suma es: <samp>42</samp>.
</p>

Personalización con CSS

Puedes modificar el estilo predeterminado:

samp {
  font-family: "Consolas", monospace;  /* Fuente monoespaciada */
  background: #f0f0f0;                /* Fondo gris claro */
  padding: 2px 6px;                   /* Espaciado interno */
  border-radius: 3px;                 /* Bordes redondeados */
  color: #c7254e;                     /* Color del texto */
}

HTML:

<samp style="background: #2d2d2d; color: #fff; padding: 5px;">
   Success: Archivo subido correctamente.
</samp>

Resultado:

Success: Archivo subido correctamente.

Diferencias entre <samp>, <code> y <kbd>

Etiqueta Propósito
<samp> Muestra texto de salida generado por un programa (ejemplo: mensajes).
<code> Representa código fuente (ejemplo: funciones o variables).
<kbd> Indica entrada del usuario (ejemplo: teclas o comandos escritos).

HTML:

<p>
   Escribe <kbd>python --version</kbd> para ver la versión de Python.  
   Salida esperada: <samp>Python 3.11.4</samp>.
</p>

Accesibilidad

  • Los lectores de pantalla reconocen <samp> como texto de muestra, lo que ayuda a usuarios con discapacidad visual a entender el contexto.

  • Evita usar <samp> para estilizar texto arbitrario; reserva su uso para contenido generado por sistemas.

Buenas prácticas

  • Combínala con <pre>: Para mostrar bloques de salida con formato complejo (como logs de consola).

  • No abuses: Solo úsala cuando el texto represente una salida real de un programa.

  • Prioriza la claridad: Asegúrate de que el contenido sea fácil de leer, incluso con estilos personalizados.

Ejemplo completo

<!DOCTYPE html>
<html>
<head>
  <style>
    samp {
      font-family: "Consolas", monospace;
      background: #f8f8f8;
      padding: 8px;
      border: 1px solid #ddd;
      display: block;
      margin: 10px 0;
    }
    kbd {
      background: #eaeaea;
      padding: 2px 5px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <h2>Ejemplo de interacción con la terminal</h2>
  <p>
    Ejecuta el comando: <kbd>npm install</kbd>
  </p>
  <samp>
    added 152 packages in 5s
    <br>
    23 packages are looking for funding
  </samp>
</body>
</html>

Casos avanzados

Simular una terminal interactiva

<pre>
<samp>
$ node app.js
<span style="color: green;">Servidor iniciado en el puerto 3000</span>
<span style="color: #666;">[GET] /home → 200 OK</span>
</samp>
</pre>

Conclusión

La etiqueta <samp> es una herramienta semántica clave para representar salidas de programas, mensajes de sistema o resultados técnicos. Al usarla adecuadamente, mejoras la claridad de tu contenido y facilitas la comprensión para usuarios y desarrolladores. ¡Inclúyela en tus proyectos para destacar información generada por sistemas!