GUÍAS PRÁCTICAS · Web y códigos
Espacios e indentación en HTML
Descubre qué espacios cambian una página y qué revisar después de formatear un fragmento HTML.
Por Puffinmint · Actualizada el
Por qué importan los espacios entre etiquetas
La sangría facilita leer el código, pero los nodos de texto forman parte del documento. Los espacios entre elementos inline pueden separar palabras o imágenes.
Formatea una copia conservando el texto
Trabaja sobre una copia de HTML. Se conservan atributos y bloques pre, script, style, textarea y title; se ajustan espacios entre bloques. No se convierte JSX ni se valida el documento.
-
Datos de entrada
<div><p>A <strong>B</strong> C</p></div> -
Pasos del cálculo
Elige y aplica el método
-
Resultado
<div> <p>A <strong>B</strong> C</p> </div>
PRUEBA ESTE PASO
Formateador HTML online
Trabaja dentro de esta guía: carga un ejemplo, ejecuta la herramienta y modifica los datos para comparar resultados. El segundo experimento prueba otro caso.
Un ejemplo reproducible
En una frase con un elemento strong, los espacios alrededor del elemento separan palabras. Consérvalos. Dentro de pre deben mantenerse saltos de línea y espacios iniciales aunque se indente el contenedor.
Conserva un espacio de no separación
El segundo ejemplo contiene un espacio U+00A0 entre dos div. Formatea y copia el resultado: ese espacio debe permanecer. No hay vista previa HTML ni se ejecutan scripts.
Resultado
Introduce los datos para ver el resultado.
Espacios inline y contenido de pre
En una frase con un elemento strong, los espacios alrededor del elemento separan palabras. Consérvalos. Dentro de pre deben mantenerse saltos de línea y espacios iniciales aunque se indente el contenedor.
Caso de uso
- Datos de entrada
<div><p>A <strong>B</strong> C</p></div>- Resultado
<div> <p>A <strong>B</strong> C</p> </div>
Revisa el código en tu proyecto
Comprueba el resultado con el CSS del proyecto, especialmente white-space, y con las pruebas de la plantilla. Formatear no demuestra un anidamiento válido. La herramienta muestra texto y no ejecuta HTML.
Son datos de ejemplo, no medidas de un caso real. El resultado utiliza el mismo motor que la herramienta completa. Compáralo con los pasos de la guía y marca las comprobaciones después de revisarlo.
| Parámetro | Valor |
|---|---|
| ¿Cuáles son los límites de la herramienta? | Hasta 100.000 caracteres y 10.000 tokens. Solo HTML, sin validación ni JSX; los espacios entre bloques pueden cambiar. |
| Procesamiento y privacidad | Los datos y resultados se procesan en tu navegador y no se envían al servidor. Las estadísticas agregadas, si están activas, solo registran la herramienta y el resultado de uso, sin el contenido. |