Crea tu web, tutor html, css

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 c2
<pre> Se usa para texto preformateado, respeta los espacios en blanco y los saltos de linea (sin necesidad de <br>
o &nbsp;), 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