Etiqueta samp en HTML

¿Qué es la etiqueta <samp> en HTML?

La etiqueta HTML <samp> es una etiqueta de formato de texto que se utiliza para representar la salida de un programa de computadora o la entrada del usuario. Cuando se usa la etiqueta <samp>, el texto dentro de ella se mostrará en un tipo de letra monoespaciado, típicamente con un fondo gris claro en la mayoría de los navegadores web.

La etiqueta <samp> es útil para mostrar el resultado de un programa de computadora o la entrada de un usuario de manera clara y fácil de leer. También se puede utilizar para indicar un código de ejemplo o para mostrar una respuesta en una interacción de usuario.

Es importante tener en cuenta que la etiqueta <samp> no se utiliza para resaltar o enfatizar el texto, sino para indicar que es una muestra de código o entrada/salida de usuario. Por lo tanto, no se debe confundir con otras etiquetas de formato de texto, como <code> o <pre>, que se utilizan para mostrar código o texto preformateado.

La etiqueta <samp> es una de las etiquetas de formato de texto básicas de HTML5 y se puede utilizar en combinación con otras etiquetas de formato de texto para crear documentos web bien estructurados y legibles.

Ejemplo de uso

Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <samp> en HTML:


<p>El resultado de la operación es: <samp>4</samp></p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de una operación matemática. El número “4” se muestra dentro de la etiqueta <samp>, lo que indica que es la salida de la operación y no parte del texto normal.

Atributos

La etiqueta <samp> en HTML5 tiene algunos atributos que se pueden utilizar para personalizar su apariencia o proporcionar información adicional.

Los atributos principales de la etiqueta <samp> son:

  • class: se utiliza para asignar una o más clases CSS al elemento <samp> para aplicar estilos personalizados a todos los elementos que tengan la misma clase.
  • id: se utiliza para asignar un identificador único al elemento <samp> para que pueda ser referenciado por otros elementos en la página.
  • title: se utiliza para proporcionar información adicional sobre el elemento <samp> en forma de texto emergente cuando el usuario mueve el cursor sobre el elemento.

Además, la etiqueta <samp> también admite algunos atributos globales de HTML5, como style para aplicar estilos en línea, accesskey para definir una tecla de acceso rápido y tabindex para definir el orden de tabulación del elemento.

Es importante tener en cuenta que la etiqueta <samp> no tiene atributos específicos que se refieran directamente a su función de mostrar la salida de un programa o la entrada del usuario.

En cambio, los atributos mencionados anteriormente se utilizan para personalizar su apariencia o proporcionar información adicional como con cualquier otro elemento HTML5.

Más ejemplos

Aquí te presento tres ejemplos de cómo se puede utilizar la etiqueta <samp> para mostrar la salida de una muestra o una sección de código:

Ejemplo 1: Utilizando la etiqueta <samp> para mostrar la salida de un programa y aplicando estilos personalizados con CSS.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta samp con estilos personalizados</title>
	<style>
		.samp {
			background-color: #f5f5f5;
			padding: 5px;
			font-family: monospace;
		}
	</style>
</head>
<body>
	<p>El resultado del programa es: <samp class="samp">Hola, Mundo!</samp></p>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de un programa y hemos aplicado estilos personalizados con CSS a la etiqueta <samp>.

Hemos aplicado un fondo gris claro y un estilo de fuente de ancho fijo para hacer que la salida del programa se destaque del resto del texto.

Ejemplo 2: Utilizando la etiqueta <samp> para mostrar la salida de una consulta a una base de datos.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta samp con consulta a base de datos</title>
</head>
<body>
	<p>El número de productos disponibles es: <samp>23</samp>.</p>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de una consulta a una base de datos. Hemos utilizado la etiqueta <samp> para mostrar el número de productos disponibles en el inventario.

Ejemplo 3: Utilizando la etiqueta <samp> para mostrar la salida de un programa y añadiendo una descripción con el atributo “title”.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta samp con descripción</title>
</head>
<body>
	<p>El resultado del programa es: <samp title="Esto es la salida del programa">Hello, World!</samp></p>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <samp> para mostrar la salida de un programa y hemos agregado una descripción de la salida utilizando el atributo “title”.