Cuando agrega texto al código HTML de una página Web, por ejemplo, en un elemento de párrafo, tiene poco o ningún control sobre dónde se romperán esas líneas de texto o el espaciado que se utilizará. Esto se debe a que el explorador web fluirá el texto según sea necesario basándose en el área que lo contiene. Esto incluye sitios web receptivos que tendrán un diseño muy fluido que cambia según el tamaño de la pantalla que se utiliza para ver la página. El texto HTML romperá una línea donde lo necesita una vez que haya llegado al final de su área de contención. Al final, el navegador juega un papel más importante en la determinación de cómo se rompe el texto que usted.

En términos de agregar espacio para crear un formato o diseño determinado, HTML no reconoce el espacio que se agrega al código, incluyendo los retornos de barra espaciadora, tabulador o carro. Si pones veinte espacios entre una palabra y la palabra que viene después de ella, el navegador sólo mostrará un único espacio. Esto se conoce como colapso del espacio en blanco y es en realidad uno de los conceptos de HTML con el que muchos nuevos en la industria luchan al principio. Ellos esperan que los espacios en blanco HTML funcionen de la forma en que lo hacen en un programa como Microsoft Word, pero así no es como funcionan los espacios en blanco HTML en absoluto.

En la mayoría de los casos, el manejo normal del texto en cualquier documento HTML es exactamente lo que necesita, pero en otros casos, es posible que desee tener más control sobre la forma exacta en que el texto se espacia y dónde se rompen las líneas. Esto se conoce como texto preformateado (en otras palabras, usted dicta el formato). Puede añadir texto preformateado a sus páginas web utilizando el formato HTML

pre

tag.

Usando la etiqueta

 Tag

Hace muchos años, era común ver páginas web con bloques de texto preformateados. Usando el

para definir secciones de la página como formateadas por la propia escritura fue una forma rápida y fácil para los diseñadores web de conseguir que el texto se mostrara como ellos querían. Esto fue antes del surgimiento del CSS para la maquetación, cuando los diseñadores web estaban realmente atascados tratando de forzar la maquetación utilizando tablas y otros métodos de sólo HTML. Esto (más o menos) funcionó porque el texto preformateado se define como texto en el que la estructura está definida por convenciones tipográficas en lugar de por el renderizado HTML.

Hoy en día, esta etiqueta no se usa tanto porque CSS nos permite dictar estilos visuales de una manera mucho más eficiente que tratar de forzar la apariencia en nuestro HTML y porque los estándares Web dictan una clara separación de estructura (HTML) y estilos (CSS). Aún así, puede haber casos en los que el texto preformateado tenga sentido, como en el caso de una dirección de correo en la que desee forzar los saltos de línea o en el caso de ejemplos de poesía en los que los saltos de línea sean esenciales para la lectura y el flujo general del contenido.

Aquí hay una manera de usar la etiqueta HTML

:
 


>.Did gyre and gimble 
 Gyre y gimble 

 in

 the

 wabe 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
El HTML típico colapsa el espacio en blanco del documento. Esto significa que los retornos de carro, los espacios y los caracteres de tabulación utilizados en este texto se colapsarían todos en un espacio. Si escribiera la cita anterior en una etiqueta HTML típica como la etiqueta p (párrafo), terminaría con una línea de texto, como ésta:
Twas brillig and the slithey toves Did gyre and gimble in the wabe
La etiqueta pre deja los caracteres de espacio en blanco tal como están. Por lo tanto, los saltos de línea, espacios y tabulaciones se mantienen en la representación de ese contenido por parte del navegador. Poner la cita dentro de una
pre para ese mismo texto: 
Twas brillig and the slithey toves
 Gyre y gimble
 en 
 the
 wabe
  Con respecto a las fuentes
El
La etiqueta 
pre
 hace más que sólo mantener los espacios y saltos del texto que escribes. En la mayoría de los navegadores, está escrito en una fuente monoespacial. Esto hace que los caracteres del texto sean todos iguales en anchura. En otras palabras, la letra i ocupa tanto espacio como la letra w.
Si prefiere utilizar otra fuente en lugar de la monospacio predeterminada que muestra el navegador, puede cambiarla con hojas de estilo y seleccionar cualquier otra fuente en la que desee que se muestre el texto.
  HTML5
Una cosa a tener en cuenta es que, en HTML5, el atributo "width" ya no es compatible con el elemento 
. En HTML 4.01, el ancho especificaba el número de caracteres que contendría una línea, pero esto se ha dejado caer para HTML5 y más allá.

Editado por Jeremy Girard el 2/2/17