Describa los espacios en HTML y su uso.

Los espacios en HTML, también llamados "espacio en blanco", son caracteres que el navegador no muestra (espacios, tabulaciones, caracteres de nueva línea). Los navegadores generalmente los colapsan en un solo espacio al renderizar, excepto en ciertos elementos y propiedades CSS.

Uso:

1. Mejorar la legibilidad del código: Los desarrolladores usan espacios para separar visualmente los elementos en el código fuente HTML, haciéndolo más comprensible y estructurado. Esto no afecta la visualización de la página en el navegador.

2. Separación de elementos en línea: Los navegadores insertan automáticamente un espacio entre elementos en línea colocados uno junto al otro en el código HTML. Este comportamiento puede modificarse con CSS.

3. Elementos que conservan espacios:

   • <pre>: Conserva todos los espacios y saltos de línea, formateando el texto exactamente como está en el código fuente.
   • <code>: Generalmente se usa dentro de <pre> para mantener el formato del código.
   • <textarea>: Dentro de un campo de entrada de texto, los espacios y saltos de línea se conservan.

4. Propiedad CSS white-space: Permite controlar cómo el navegador procesa los espacios dentro de un elemento:

   • normal (por defecto): Colapsa los espacios, los saltos de línea se ignoran (excepto <br>).
   • nowrap: Colapsa los espacios pero evita los saltos de línea.
   • pre: Equivale a usar la etiqueta <pre>.
   • pre-wrap: Conserva los espacios y saltos de línea, y también permite el ajuste automático de línea según el ancho del contenedor.
   • pre-line: Colapsa los espacios, pero conserva los saltos de línea.

Ejemplo de colapso de espacios:

HTML:

<p>
    Muchos        espacios

    y
    saltos
    de línea
</p>

Resultado en el navegador:

Muchos espacios y saltos de línea

Ejemplo usando <pre>:

HTML:

<pre>
    Se conservan
        todos
            los espacios
    y
    saltos
</pre>

Resultado en el navegador:

    Se conservan
        todos
            los espacios
    y
    saltos

Ejemplo usando CSS white-space:

HTML:

<div class="pre-wrap">
    Este texto conservará
        sus espacios
            y saltos

    de línea,
    y también se ajustará automáticamente.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}