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) sobre 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) sobre 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) sobre CódigoPen.
Mientras 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) sobre 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 en una dirección:
ver la pluma Espacio HTML: ejemplo br de Christina Perricone (@hubspot) sobre CódigoPen.
La etiqueta de interrupción está pensada para saltos de una sola línea y no más de uno seguido. Si desea agregar espacios en blanco adicionales entre fragmentos de texto, use relleno y márgenes CSS en su lugar para obtener un código más limpio. O bien, puede utilizar un HTML
etiqueta, como veremos a continuación.
Etiqueta HTML de párrafo (
)
El
element es uno de los primeros que aprenderá como principiante, y por una buena razón. El
etiqueta denota un párrafo en HTML, por lo que aparece en todas partes.
es un elemento de nivel de bloque, lo que significa que (1) su ancho predeterminado se establece en el ancho de toda la página y (2) hay un salto de línea antes y después del elemento de bloque. Con
, los navegadores agregarán algunos espacios en blanco adicionales con este salto de línea para que los párrafos consecutivos sean más legibles, por lo que se puede usar en cualquier momento que esté usando bloques de texto que son distintos entre sí.
ver la pluma Espacio HTML: p ejemplo de Christina Perricone (@hubspot) sobre CódigoPen.
El
El elemento también tiene la ventaja de ser un elemento HTML semántico. Esto significa que la etiqueta misma indica lo que hace el elemento (es decir, el párrafo etiqueta denota un párrafo de texto), lo que hace que su contenido sea más accesible para las tecnologías de asistencia y ayuda a los motores de búsqueda a indexar mejor su página web.
Cómo insertar un espacio en CSS
Para ubicar espacios que tienen más que ver con el estilismo de su página que el contenido, utilice Hojas de estilo en cascada (CSS). Con CSS, puede aplicar y modificar reglas de estilo en toda la página y en todo el sitio con solo uno o dos pequeños cambios en las reglas, en lugar de cambiar cada instancia en su HTML; solo asegúrese de agregar CSS externamente.
Aquí hay algunos usos útiles de CSS para agregar espacio entre su contenido.
Sangría de texto CSS
Si desea colocar una sangría en la primera línea de un elemento de bloque como
, utiliza el CSS guion de texto propiedad. Por ejemplo, para agregar una sangría de 4 espacios, aplique la regla sangría de texto: 4em; al elemento. También puede usar una unidad de longitud diferente como píxeles o cm, o establezca la sangría como un porcentaje del ancho de la página:
ver la pluma Espacio HTML: ejemplo de sangría de texto de Christina Perricone (@hubspot) sobre CódigoPen.
Al usar esta técnica, puede alargar o acortar rápidamente todas sus sangrías cambiando el valor de guion de texto. Esto es mucho más fácil que agregar o eliminar varias instancias de por cada párrafo con sangría.
Alineación de texto CSS
En lugar de usar espacios HTML para alinear el texto de cierta manera, opta por la solución mucho más limpia de la propiedad CSS text-align. Con esta propiedad, puede alinear el texto dentro de un elemento de bloque a la izquierda o a la derecha, así como centrar o justificar el texto.
ver la pluma Espacio HTML: ejemplo de alineación de texto de Christina Perricone (@hubspot) sobre CódigoPen.
Márgenes y relleno
A cada elemento HTML se le pueden dar márgenes y relleno, como se ilustra en el modelo de caja CSS:
Para agregar espacios en blanco fuera del borde de un elemento, podemos ajustar su margen valor en CSS. Para el espaciado dentro de un borde, podemos alterar su relleno valor para un efecto similar. Ambos se demuestran a continuación:
ver la pluma Espacio HTML: márgenes y relleno de Christina Perricone (@hubspot) sobre CódigoPen.
Agregar espacios adicionales en HTML
El colapso de espacios en blanco puede ser levemente molesto a veces. Afortunadamente, hay varias formas de evitarlo, y conocer el mejor elemento o regla para cada caso será útil cuando comience a crear páginas web completas usted mismo.
Como último recordatorio, asegúrese de usar trucos de espacios en blanco HTML para su contenido (por ejemplo, espacios entre palabras o líneas individuales) y CSS para diseñar todo lo demás.
