Una explicación de qué es el texto preformateado en HTML

Cuando agrega texto al código HTML para una página web, digamos 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 usará. Esto se debe a que el navegador web hará fluir el texto según sea necesario en función del área que lo contiene. Esto incluye sitios web receptivos que tendrá 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 sea necesario una vez que haya llegado al final de su área de contención. Al final, el navegador juega un papel más importante en determinar cómo se rompe el texto que tú.

En términos de agregar espacio para crear un determinado formato o diseño, HTML no reconoce el espacio que se agrega al código, incluidos los retornos de barra espaciadora, tabulación o carro. Si coloca veinte espacios entre una palabra y la palabra que la sigue, el navegador mostrará solo un espacio allí. Esto se conoce como colapso de espacios en blanco y en realidad es uno de los conceptos de HTML con los que muchos nuevos en la industria luchan al principio. Esperan que los espacios en blanco HTML funcionen como en un programa como Microsoft Word, pero no es así en absoluto como funcionan los espacios en blanco HTML.

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

 Utilizando la 
 Etiqueta 

Hace muchos años, solía ser común ver páginas web con bloques de texto preformateado. Utilizando la 
 La etiqueta para definir secciones de la página con el formato de la escritura en sí fue una forma rápida y fácil para que los diseñadores web lograran que el texto se mostrara como querían. Esto fue antes del surgimiento de CSS para el diseño, cuando los diseñadores web estaban realmente atascados tratando de forzar el diseño utilizando tablas y otros métodos solo HTML. Esto (un poco) funcionó hacia atrás porque el texto preformateado se define como texto en el que la estructura está definida por convenciones tipográficas en lugar de por la representación 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 intentar para 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 para una dirección de correo donde desea forzar los saltos de línea o para ejemplos de poesía donde los saltos de línea son esenciales para la lectura y el flujo general de la contenido. 

Aquí hay una forma de usar el HTML 
 etiqueta: 

El HTML típico contrae 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 contraerían en un espacio. Si escribió la cita anterior en una etiqueta HTML típica como la etiqueta p (párrafo), terminaría con una línea de texto, como esta: 

Twas brillig y los slithey toves giraban y gimoteaban en el wabe. 

La etiqueta previa deja los espacios en blanco como están. Por lo tanto, los saltos de línea, los espacios y las pestañas se mantienen en la representación del navegador de ese contenido. Poniendo la cita dentro de un 
 etiqueta para ese mismo texto daría como resultado esta pantalla: 
Twas brillig y el slithey toves
Hizo girar y gimble
en
la
wabe
 Respecto a las fuentes 

La 
 La etiqueta hace más que solo mantener los espacios y las pausas para el texto que escribe. En la mayoría de los navegadores, está escrito en una fuente monoespaciada. Esto hace que todos los caracteres del texto tengan el mismo ancho. En otras palabras, la letra i ocupa tanto espacio como la letra w. 

Si prefiere usar otra fuente en lugar de la monoespaciada predeterminada que muestra el navegador, aún puede cambiar esto con hojas de estilo y seleccione cualquier otro fuente desea que el texto se represente en. 
 HTML5 

Una cosa a tener en cuenta es que, en HTML5, el atributo "ancho" ya no es compatible con 
 elemento. En HTML 4.01, el ancho especificaba la cantidad de caracteres que contendría una línea, pero esto se ha eliminado para HTML5 y posteriores.