admin
Si bien HTML tiende a ser un lenguaje bastante intuitivo para aprender, a veces actúa de formas que los principiantes podrían no esperar. Por ejemplo, ¿cómo agrega más de un espacio entre dos palabras o caracteres en HTML?
¡Simplemente sigue presionando la barra espaciadora y listo! Gracias por leer.
Es broma, hay un poco más que eso. Si desea agregar múltiples espacios adyacentes en HTML, presionar la barra espaciadora repetidamente no funcionará como lo hace en un documento de texto sin formato. Si hace esto en HTML, el navegador condensará los espacios que agregue en uno solo:
ver la pluma Ejemplo de colapso de espacio en blanco de Christina Perricone (@hubspot) en CódigoPen.
Este comportamiento se denomina colapso de espacios en blanco: los navegadores mostrarán varios espacios HTML como un solo espacio y también ignorarán los espacios antes y después de los elementos y fuera de los elementos.
Si bien esta regla a veces es inconveniente, existen algunas soluciones que los programadores de HTML principiantes deben conocer. En esta publicación, le mostraremos cuatro formas rápidas de colocar espacios adicionales en su documento HTML, además de algunos consejos sobre cómo agregar espacios con CSS.
Cómo insertar un espacio en HTML
HTML maneja el contenido de una página web. Si su contenido requiere espacio adicional para que tenga sentido, puede probar cualquiera de los métodos a continuación.
Sin embargo, si desea agregar espacio para fines de estilo (por ejemplo, espacios en blanco entre elementos), le recomendamos que use CSS en su lugar: vaya a la siguiente sección para aprender cómo.
HTML sin espacios de separación ( )
La forma más sencilla de agregar un espacio en HTML (además de presionar la barra espaciadora) es con la entidad de espacio sin interrupciones, escrita como o . El navegador no colapsará múltiples espacios adyacentes que no se rompan, lo que le permitirá «forzar» varios espacios visibles entre palabras u otros elementos de la página.
ver la pluma Espacio HTML: ejemplo nbsp de Christina Perricone (@hubspot) en CódigoPen.
Cuando se representa en el navegador, un espacio sin interrupciones se verá como un espacio normal. La única diferencia es que este espacio nunca se dividirá en una nueva línea: dos palabras o elementos separados por siempre aparecerá en la misma línea. Esto es útil si dividir dos fragmentos de texto sería confuso para el lector, como en el caso de «9:00 AM» o «1 000 000».
Finalmente, puede usar las entidades HTML adicionales y para agregar dos y cuatro espacios de no separación respectivamente:
ver la pluma Espacio HTML: ejemplo de ensp y emsp de Christina Perricone (@hubspot) en CódigoPen.
Tiempo puede ser útil, no debe usarse en exceso, ya que evitar los saltos de línea puede causar problemas al mostrar el contenido en el navegador. Además, evite usar un espacio que no se rompa por razones de estilo, como sangrar o centrar un elemento en una página; el estilo debe manejarse con CSS.
Etiqueta de texto preformateado HTML (
)
Otra forma de evitar que sus espacios HTML se colapsen es preformateando su texto HTML, que retiene todos los espacios y saltos de línea en su HTML. Cuando el HTML se representa en el navegador, el texto se verá como en el archivo HTML. El formato previo es útil para contenido de texto con un componente visual, como poesía o arte ASCII.
Para preformatear su texto, colóquelo dentro de un
ver la pluma Espacio HTML: ejemplo previo de Christina Perricone (@hubspot) en CódigoPen.
Tenga en cuenta que los navegadores web aplican una fuente monoespaciada al texto dentro
Etiqueta de ruptura HTML (
)
Si desea evitar un salto de línea entre dos palabras, utilice un espacio que no se rompa. Si quieres insertar un salto de línea, use la etiqueta de salto HTML, escrita como
. No necesita una etiqueta de cierre aquí, solo escriba
agrega un salto de línea.
La etiqueta de salto es útil para los casos en los que se necesita un salto de línea para comprender el contenido, pero no desea utilizar necesariamente un nuevo elemento de párrafo, como...
