Crea tu web, tutor html, css

Etiquetas tipográficas

Aún existen otras etiquetas que aquí agrupamos como etiquetas tipográficas, el 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 etiqueta 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