¿Cómo usar la etiqueta pre en HTML y CSS?

Autor: | Última modificación: 2 de junio de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post: , ,

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 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 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 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!