Texto preformateado

Etiqueta <pre> En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación. En estos casos, podemos utilizar la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todos los saltos de línea. Definición formal de la etiqueta <pre> <pre> Texto preformateado Atributos comunes básicos, ¡18n y eventos Atributos específicos - Tipo de elemento Bloque Descripción Muestra el texto que encierra tal y como está escrito (respetando los espacios en blanco y los saltos de línea) En el siguiente ejemplo presentamos el uso de la etiqueta <pre>: <p>         La etiqueta pre    respeta los espacios en blanco       y muestra el texto      tal y como    está escrito </p> <pre>         La etiqueta pre    respeta los espacios en blanco       y muestra el texto      tal y como    está escrito </pre> Hemos incluído el mismo texto, con espacios en blanco y saltos de línea, dentro de una etiqueta <p> y una etiqueta <pre>, Siendo éstas las diferencias visuales en un navegador: La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como está escrito La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como está escrito El primer texto se ve como un párrafo normal, ya que HTML ha eliminado todos los espacios en blanco sobrantes y los saltos de línea. El segundo texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. Los elementos <pre> son especiales, ya que los navegadores les aplican las siguientes reglas: Mantienen todos los espacios en blanco (tabuladores, espacios y saltos de línea) Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas sus letras son de la misma anchura No se ajusta la longitud de las líneas (las líneas largas producen un scroll horizontal en la ventana del navegador) Esta última característica diferencia por completo a los párrafos de los elementos <pre>. Como se ha visto, los navegadores ajustan la anchura de los párrafos de texto para que ocupen todo el tamaño de la ventana. Sin embargo, los elementos <pre> se muestran tal y como son originalmente, por lo que una línea muy larga dentro de un elemento <pre> provoca que la anchura de la página sea superior a la anchura de la ventana del navegador. Si en el ejemplo anterior añadimos más texto al final de la segunda línea (para producir una línea larga), el navegador muestra un scroll horizontal (barra de desplazamiento), ya que el texto completo no cabe en el tamaño de la ventana y las líneas de los elementos <pre> nunca se ajustan: Etiqueta <code> La etiqueta <code>, relacionada con <pre>, se utiliza para mostrar código fuente de cualquier lenguaje de programación. En la mayoría de páginas web no tiene sentido utilizar la etiqueta <code>. Sin embargo, en muchas páginas web técnicas que incluyen listados de programas, trozos de código o etiquetas HTML, lo correcto es utilizarla. Ejemplo: <code>         La etiqueta code    no respeta los espacios en blanco </code> <p>La etiqueta <code>code</code> es similar a la etiqueta <code>pre</code>, sobre todo en el formato del texto.</p> El navegador nos mostrará, entonces, el comportamiento de <code> y sus diferencias con <pre>: La etiqueta code no respeta los espacios en blanco La etiqueta code es similar a la etiqueta pre, sobre todo en el formato del texto. Al igual que sucede con los elementos <pre>, el texto encerrado por la etiqueta <code> se muestra con un tipo de letra especial de ancho fijo. Al contrario de <pre>, el elemento <code> no respeta los espacios en blanco ni los saltos de línea, por lo que su comportamiento es similar a la etiqueta <p>. La última diferencia es que <code> es un elemento en línea, mientras que <pre> es un elemento de bloque.

Twittear

Índice Formatear
Formato de párrafos HTML
Estructurar un texto
Marcado básico de texto
Texto preformateado
Espacios en blanco y saltos de línea
Marcado avanzado de texto
Marcado genérico de texto
Codificación de caracteres

◄Anterior | Siguiente►