Etiquetas pre, code, samp, kbd y var para mostrar código en HTML

Cuando trabajamos con textos en una página web, sobre todo si su contenido es técnico, a veces puede ocurrirnos que necesitemos mostrarlo en un formato determinado. Para ello HTML incorpora una serie de etiquetas semánticas que permiten indicarle al navegador que la información contenida dentro es especial. Éstas son pre, code, samp, kbd y var.

Por defecto, las etiquetas anteriores cambiarán la tipografía del texto por la fuente de tipo monospace que tenga nuestro sistema operativo de manera predeterminada, aunque con CSS podremos personalizar la maquetación web con los atributos que queramos.

pre

Si conoces HTML sabrás que una de las primeras cosas a tener en cuenta es que existen de una serie de reglas para maquetar textos que limitan el modo en el que podemos introducir contenido. Por ello, esta primera etiqueta <pre> se usa para definir un texto que está preformateado y queremos que se muestre tal cual lo introducimos. Es decir, el navegador pintará el contenido con los espacios, saltos de línea o tabulaciones que hayamos introducido sin seguir las reglas habituales.

<pre>
Doble  espacio sin usar &nbsp;
	Tabulación
Salto de
línea sin usar <br>
</pre>

Como vemos en el ejemplo, no es necesario usar ciertos elemento para que el texto se muestre como queremos. Este elemento lo podemos usar conjuntamente con los posteriores para ayudarnos a tener el formato óptimo.

code

Cuando lo que vamos a representar es algún tipo de código de programación podemos usar <code>, una etiqueta que en lo personal uso frecuentemente en el presente blog. Podemos usarla dentro de una línea de texto si el script es pequeño o bien podemos usar tantas líneas como necesitemos, en cuyo caso lo conveniente será englobarla dentro de un <pre> para que nos respete el formato HTML.

<pre>
<code>
    <?php
    if (a = b){
        echo "Usar la etiqueta code mola";
    }
    ?>
</code>
</pre>

Como se puede ver, al usarla conjuntamente con la anterior es mucho más cómodo trabajar ya que podemos copiar y pegar directamente desde el editor de código con el que estemos trabajando.

samp

Supongamos que lo que necesitamos formatear no es nada de lo anterior sino un mensaje, aviso o notificación que da un sistema, ya sea del propio sistema operativo o de un programa, del tipo que sea. Si este es nuestro caso disponemos de la etiqueta <samp> y nos será muy útil cuando reflejamos para diferenciar este contenido de un simple entrecomillado.

<samp>Error 404. Página no encontrada.</samp>

kbd

También disponemos de una etiqueta para representar una entrada de información por teclado. Supongamos que queremos mencionar el famoso atajo de teclado para cortar (ctrl + c) o simplemente queremos indicar que el usuario debe introducir un texto determinado. De ser así, en ambos casos usaremos <kbd>.

<kbd>ctrl + c</kbd> para cortar

var

En último lugar y no por ello menos importante, si vamos a trabajar con variables ya sean matemáticas o de programación podemos usar el elemento <var>. Es este caso etiquetaremos solo aquellos elementos que sean una variable.

<var>variable1</var> + <var>variable2</var> = <var>variable3</var>

En el ejemplo anterior podemos ver cómo los operadores quedarían fuera de las etiquetas, quedando éstos como texto HTML normal.

Como habrás podido ver, cada etiqueta para mostrar código en HTML se usa para un cometido diferente. Trata de usar durante la maquetación del texto la que mejor se adecúe a la situación, ya que esto es beneficioso tanto para los buscadores como para la accesibilidad de la página web.