Los elementos code, kbd, pre, samp y var

HTML fue diseñado por Tim Berners-Lee para visualizar documentos técnicos y científicos, por lo que no es extraño que contenga varios elementos para etiquetar ejemplos e instrucciones. Desgraciadamente, estos elementos sulen no ser conocidos o se suelen emplear de forma incorrecta.

code

<code> define fragmento o ejemplo de código en línea (sin saltos de línea), escrito en HTML, CSS, JavaScript, Java, C++ o cualquier otro lenguaje de programación. Por ejemplo:

<p>
La etiqueta <code>img</code> permite incluir una imagen en una página web.
</p>

Unas indicaciones sobre el uso de <code>:

<code> se visualiza en un tipo de letra monoespaciado por defecto (como si en un CSS se hubiese definido como font-family: monospace). Si no se quiere que se muestre en un tipo de letra monoespaciado se puede emplear CSS para modificar su aspecto.

kbd

kbd define un texto que se debe introducir en el ordenador y un comando o un atajo de teclado. Por ejemplo:

<p>
Para pegar el contenido copiado se debe pulsar <kbd>Ctrl+V</kbd> o <kbd>Shift+Ins</kbd>.
</p>

Unas indicaciones sobre el uso de <kdb>:

<kbd> se visualiza en un tipo de letra monoespaciado por defecto (como si en un CSS se hubiese definido como font-family: monospace). Si no se quiere que se muestre en un tipo de letra monoespaciado se puede emplear CSS para modificar su aspecto.

El ejemplo anterior se muestra como:

Para pegar el contenido copiado se debe pulsar Ctrl+V o Shift+Ins.

La combinación de teclas no se destaca correctamente respecto el resto del texto. La siguiente regla de CSS ayuda a diferenciar claramente las combinaciones de teclado:

kbd {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.1em 0.5em;
	margin: 0 0.2em;
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
	background-color: #f7f7f7;
}

Con el estilo anterior, el contenido etiquetado con <kbd> se visualiza como:

Para pegar el contenido copiado se debe pulsar Ctrl+V o Shift+Ins.

pre

<pre> define un texto preformateado en el que se deben respetar los espacios en blanco, los tabuladores y los saltos de línea. Esta etiqueta se puede emplear para incluir un fragmento de código en una página web. Por ejemplo:

<pre>
function max(a, b) {
	if(a > b)
		return a;
	else
		return b;
}
</pre>

samp

<samp> define un contenido que es la salida de un programa o de un fragmento de código. Por ejemplo:

<p>
La salida del programa fue: <samp>El contenido solicitado no está disponible</samp>.
</p>

Unas indicaciones sobre el uso de <samp>:

<samp> se visualiza en un tipo de letra monoespaciado por defecto (como si en un CSS se hubiese definido como font-family: monospace). Si no se quiere que se muestre en un tipo de letra monoespaciado se puede emplear CSS para modificar su aspecto.

var

<var> define una variable que forma parte de un código. Por ejemplo:

<p>
En el algoritmo de búsqueda, <var>n</var> representa el número de elementos a buscar y <var>t</var> el número de elementos encontrados.
</p>

Unas indicaciones sobre el uso de <var>:

<var> se visualiza en cursiva por defecto, pero no se debe emplear con el único propósito de mostrar un texto en cursiva. Para ello se debe emplear <em> o <i>. Si no se quiere que se muestre en cursiva se puede emplear CSS para modificar su aspecto.