Etiquetas tipográficas

Aún existen otras etiquetas que aquí agrupamos como etiquetas tipográficas(code, pre, samp...) cuyo efecto visual es mínimo, en general aparecen como cursiva o con alguna fuente de texto diferente, aunque por supuesto usando estilos CSS este aspecto puede ser alterado a nuestro gusto.

Como las restantes etiquetas de texto su valor reside en un significado propio, que robots analizadores de las páginas van a interpretar para entender mejor el significado de un fragmento del contenido. En este grupo el aspecto visual también dice mucho del contendio de estos elementos.

<!doctype html>

<html><head>

<meta charset="utf-8">

<title>Documento sin título</title>

</head>

<body>

Para comprar un ebook en nuestra tienda instala nuestro programa<br>

Ve a la carpeta <var>c:\ebooks</var>

y escribe esto:<br>

<kbd>install.exe</kbd><br>

A continuación verás una ventana que dice<br>

<samp>La instalación fue correcta</samp><br>

Y recuerda<br>

<pre>

###### ####   ######  ######  #   # 
#      #   #  #    #  #    #  #  #
####   ####   #    #  #    #  ##
#      #   #  #    #  #    #  #  # 
###### ####   ######  ######  #   # 
</pre>

</body>

</html>

Las etiquetas tipográficas

Observa este ejemplo de uso de las etiquetas tipográficas. Salvo var las restantes dan el aspecto de texto de consola por su funte monospace. Y fíjate en el uso del elemento pre: mantiene el texto tal y como se escribe en el código fuente de la página: respeta los saltos de linea y espacios, si la quitas verás como las marcas del dibujo se acumulan en una linea, y no se ve la figura.
En general estos tipos son muy útiles para escribir código en la página web. Y como siempreol, no solo por el aspecto visual sino por el significado semántico de la etiquetas.

Etiqueta	Descripción	Ejemplo
<code>	El texto que encierra es código de programa. El ancho de carácter es fijo y no implica salto de linea antes y depués.	Para imprimir usa la orden `print("Hola mundo")`
<kbd>	El texto que encierra se interpreta como entrada desde teclado. El ancho de carácter es fijo	Escribir el texto `Los libros entretienen`
<samp>	El texto que encierra se interpreta como un texto de salida, resultado de algo. El ancho de carácter es fijo.	El resultado de la orden dir es `15/05/2018 20:15 854 list.sql`
<var>	En un código indica un identificador de variable o constante física o elemento de programa, útil en un contexto matemático.	`E` = `m` `c`²
<pre>	Se usa para texto preformateado, respeta los espacios en blanco y los saltos de linea (sin necesidad de <br> o  ), es decir, el texto aparece tal y como se escrib en el código fuente la página. Se usa un tipo de letra con ancho de carácter es fijo (monospace).	En este texto se respetan los espacios y tabulaciones

Estas etiquetas definen como se escribe el texto en el flujo de la página