Veteasabertu

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

5 de octubre 2017
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 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.

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.

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.

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>.

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.

En el ejemplo anterior podemos ver cómo los operadores quedarían fuera.

Publicado por Jesús Tovar

Categorías: HTML

Etiquetas:

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies