HTML y CSS tienen muchas etiquetas para decorar nuestra página web y hacer que se vea diferente a nuestro código, pero ¿qué pasa cuando no queremos que se vea diferente? En este post, te enseñaremos cómo usar la etiqueta pre en HTML y CSS para mantener la lógica de tu código.
Etiqueta pre en HTML
Cuando escribimos un texto en HTML dentro de nuestro software de programación, solemos poner varios espacios entre las palabras o incluso dividir los párrafos haciendo saltos de línea. Aunque creamos que hemos organizado nuestro texto, al guardar estos cambios y verlos en la página web lo que encontraremos será un solo bloque de texto. Esto sucede porque HTML lee todos los espacios, saltos de línea y tabuladores como un solo espacio. Así que no importa cuántos espacios pongas antes de tu texto o con cuántos saltos de línea lo dividas, lo que encontrarás en la web será un solo gran párrafo.
La etiqueta pre en HTML nos permite solucionar este problema. La abreviatura css <pre> hace referencia a un texto preformateado y lleva por defecto la propiedad de mantener las características del código HTML. Quiere decir que el formato del texto en tu software ya es correcto y HTML lo traducirá igual a tu página web. Basta con agregar la etiqueta pre antes y después de tu texto para que HTML empiece a respetar los espacios en blanco.
Ten en cuenta que esta etiqueta cambiará tu tipografía a una fuente monoespaciada. Este tipo de fuente tiene la característica de hacer que cada letra ocupe el mismo espacio en la línea, sea mayúscula o minúscula.
Propiedad white-space en CSS
La etiqueta css pre en CSS funciona aplicando la propiedad white-space: pre. Esta propiedad se traduce como «espacio en blanco» y determina que CSS mantendrá los mismos espacios, saltos de línea y tabuladores de tu software. Aunque tiene la misma abreviatura que la etiqueta de HTML, aquí <pre> css se refiere a preserve. De este modo, white-space preservará las características del texto, incluyendo la sangría de cada línea de código y la tipografía. Puedes conocer más sobre el tema en este post de MDN sobre los espacios en blanco.
¿Qué sigue?
¿Te ha gustado conocer la etiqueta pre y quieres seguir aprendiendo acerca de CSS y HTML? Te invitamos a continuar con tu formación en relación a estos dos lenguajes de programación y mucho más en nuestro Desarrollo Web Full Stack Bootcamp. Aquí aprenderás, entre muchas otras cosas, etiquetas que te ayudarán a definir la estética de tu página web. ¡Anímate a matricularte!
