Si bien HTML parece ser un lenguaje bastante intuitivo, a veces funciona de formas que los principiantes podrían no esperar. Por ejemplo, ¿cómo agregar más de un espacio entre dos palabras o caracteres en HTML?
¡Solo presiona la barra espaciadora y listo! Gracias por leer.
Es broma, hay más. Si desea agregar varios 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 agregados en uno:
ver la pluma Un ejemplo de colapso de espacios en blanco de Christina Perricone (@hubspot) en CódigoPen.
Este comportamiento se denomina ajuste de espacios en blanco: los navegadores muestran múltiples espacios HTML como un solo espacio e ignoran los espacios antes y después de los elementos y los elementos externos.
Si bien esta regla es inconveniente a veces, existen algunas soluciones que los programadores de HTML novatos deben conocer. En esta publicación, le mostraremos cuatro formas rápidas de agregar espacios adicionales a su documento HTML y algunos consejos para agregar espacios en blanco usando CSS.
Cómo insertar un espacio en HTML
HTML maneja el contenido del sitio web. Si su contenido necesita espacio en blanco adicional para tener sentido, puede probar cualquiera de los siguientes métodos.
Sin embargo, si desea agregar un espacio para fines de estilo (por ejemplo, espacio entre elementos), le recomendamos que utilice CSS en su lugar: vaya a la siguiente sección para aprender cómo hacer esto.
Espacio HTML que no se rompe ()
La forma más fácil de agregar espacios en HTML (además de presionar un espacio) es usar un espacio de no separación, escrito como o . El navegador no colapsará múltiples espacios adyacentes que no se rompan, lo que le permite «forzar» algunos 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 renderiza en el navegador, un espacio sin interrupciones aparecerá como un espacio normal. La única diferencia es que este espacio nunca se dividirá en una nueva línea: dos palabras o elementos separados siempre aparecerá en la misma línea. Esto es útil si dividir dos fragmentos de texto confundiría al lector, como «9:00» o «1,000,000».
Finalmente, puede usar entidades HTML adicionales y para agregar dos y cuatro espacios de no separación respectivamente:
ver la pluma Espacio HTML: ejemplo ensp y emsp de Christina Perricone (@hubspot) en CódigoPen.
Tiempo puede ser útil, no lo use en exceso, ya que evitar los saltos de línea puede causar problemas al mostrar el contenido en el navegador. Además, evite usar espacios que no se rompan por razones de estilo, como sangrar o centrar un elemento en la página; el estilo debe manejarse con CSS.
Aprende más: Una guía para principiantes de HTML y CSS
¿Quieres saber más sobre HTML? Descarga nuestra guía gratuita para conocer las mejores prácticas para comenzar con HTML.
Texto preformateado de la etiqueta HTML (
)
Otra forma de evitar el colapso del espacio HTML es preformatear el texto HTML, lo que conserva todos los espacios y saltos de línea en su código HTML. Cuando se procesa HTML en el navegador, el texto aparecerá como en el archivo HTML. El formato previo es útil para contenido textual con un componente visual como poesía o gráficos ASCII.
Para dar formato previo al texto, colóquelo dentro de un
etiqueta:ver la pluma Espacio HTML: un ejemplo preliminar de Christina Perricone (@hubspot) en CódigoPen.
Recuerde que los navegadores web aplican una fuente monoespaciada al texto que se encuentra dentro
el marcado, pero puede cambiar esto fácilmente con la propiedad CSS font-family.etiqueta HTML (
)Si desea evitar romper una línea entre dos palabras, use un espacio que no se rompa. Si tu quieres Meter en romper una línea, use la etiqueta de ruptura HTML, escrita como
. No necesita una etiqueta de cierre aquí, solo escriba
agrega un salto de línea.Una etiqueta de ruptura es útil en situaciones en las que es necesario un salto de línea para comprender el contenido, pero no es necesario utilizar un nuevo elemento de párrafo, como en una dirección:
ver la pluma Espacio HTML: ejemplo br de Christina Perricone (@hubspot) en CódigoPen.
El marcador de ruptura está diseñado para romper líneas individuales y no más de una seguida. Si desea agregar espacio adicional entre fragmentos de texto, use relleno y márgenes CSS en su lugar para obtener un código más limpio. O puedes usar HTML
etiqueta como veremos a continuación.
etiqueta de párrafo HTML (
)
los
Element es uno de los primeros que aprenderá como principiante, y por una buena razón. los
etiqueta representa un párrafo en HTML, por lo que aparece en todas partes.
es un elemento de bloque, lo que significa que (1) su ancho predeterminado es el ancho de toda la página y (2) se coloca un salto de línea antes y después del elemento de bloque. DE
los navegadores agregarán espacio adicional gracias a este salto de línea para que los párrafos posteriores sean más legibles para que pueda usarlos siempre que use bloques de texto que sean diferentes entre sí.
ver la pluma Espacio HTML: p ejemplo de Christina Perricone (@hubspot) en CódigoPen.
los
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, párrafo significa un párrafo de texto), lo que hace que el contenido sea más accesible para las tecnologías de asistencia y ayuda a los motores de búsqueda a indexar mejor su sitio web.
Cómo insertar un espacio en CSS
Para colocar espacios que tienen más que ver con estilización su página en lugar de su contenido, use hojas de estilo en cascada (CSS). Con CSS, puede aplicar y cambiar reglas de estilo para toda la página y el sitio haciendo solo uno o dos pequeños cambios en las reglas, en lugar de cambiar cada aparición en su HTML; solo asegúrese de agregar el CSS externamente.
Estos son algunos usos útiles de CSS para agregar espacios entre el contenido.
sangrar texto CSS
Si desea sangrar la primera línea de un elemento de bloque como
usar CSS sangría de texto propiedad. Por ejemplo, para agregar una sangría de 4 espacios, use la regla sangría de texto: 4em; al artículo. También puede usar otra unidad de longitud, como píxeles o cmo establezca la sangría como un porcentaje del ancho de la página:
ver la pluma Espacio HTML: un ejemplo de sangría de texto de Christina Perricone (@hubspot) en CódigoPen.
Con esta técnica, puede alargar o acortar rápidamente todas las sangrías cambiando el valor sangría de texto. Esto es mucho más fácil que agregar o eliminar varias instancias 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, elija una solución de propiedad de alineación de texto CSS mucho más limpia. Puede usar esta propiedad para alinear el texto dentro de un elemento de bloque a la izquierda o a la derecha, y centrar o justificar el texto.
ver la pluma Espacio HTML: un ejemplo de alineación de texto de Christina Perricone (@hubspot) en CódigoPen.
Márgenes y relleno
Cada elemento HTML puede tener márgenes y relleno, como se ilustra en el modelo de campo CSS:
Para agregar un espacio fuera del borde de un elemento, podemos personalizarlo margen valor en CSS. En el caso de los espacios dentro del borde, podemos cambiarlo relleno valor para un efecto similar. Ambos se muestran a continuación:
ver la pluma Espacio HTML: márgenes y relleno de Christina Perricone (@hubspot) en CódigoPen.
Agregar espacios adicionales en HTML
La caída de espacios en blanco puede resultar un poco molesta en ocasiones. Afortunadamente, hay varias formas de solucionar este problema, y conocer el mejor elemento o regla para cada caso será útil cuando comience a crear páginas web completas usted mismo.
Finalmente, 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.
