Formatear y Minificar HTML - legible o compacto

Formateador y minificador HTML

Qué hace esta herramienta

Dos tareas opuestas sobre el mismo texto. Formatear añade saltos de línea y sangría para que una persona siga el anidamiento; minificar quita todo lo que el navegador no necesita. Aquí ambas trabajan sobre los caracteres que diste, no sobre un documento reconstruido, así que lo que sale sigue siendo tu marcado.

Cómo se usa

  1. 1 Pega el HTML: una página entera o solo un fragmento.
  2. 2 Elige la sangría y luego pulsa Formatear o Minificar.
  3. 3 Copia el resultado o pásalo por el otro botón para comparar.

El espacio en blanco no siempre es ruido

Entre dos elementos en línea, un solo espacio es texto visible: si lo quitas, «uno dos» se vuelve «unodos». Entre elementos de bloque, ese mismo espacio no significa nada. Aquí el minificador elimina la sangría pero conserva el espacio separador donde de verdad hace algo.

Por qué se dejan intactos pre y textarea

Dentro de ellos, cada espacio y cada salto de línea es contenido que el lector verá. Volver a sangrar un bloque de código cambiaría en silencio lo que muestra, y recortar un textarea cambiaría el valor que envía el formulario. Lo mismo con script y style: su contenido es otro lenguaje y pasa intacto.

Formatea, no repara

Las herramientas construidas sobre el analizador del navegador reparan en silencio el marcado roto: cierran tus etiquetas, tiran las sueltas y mueven elementos a donde exige la especificación. Depurando, eso rara vez es lo que quieres: el fallo que persigues puede ser justo lo que se reparó. Esta reformatea el texto y deja los errores donde puedas verlos.

Minificar HTML es la ganancia pequeña

Quitar espacios de una página suele ahorrar un pequeño porcentaje, y el gzip del servidor habría comprimido casi todo eso igualmente. El peso de verdad está en imágenes, tipografías y scripts. Minifica el HTML porque un generador de plantillas dejó la salida ilegible, no porque esperes que la página vuele.

Formateo de HTML - preguntas frecuentes

Formatear puede hacerlo en un caso concreto: añadir saltos de línea entre elementos en línea introduce un espacio que no estaba. Si un diseño depende de que dos span se toquen, formatea el bloque de alrededor pero deja esa línea en paz. La minificación está pensada para evitar el reverso del mismo problema.
Popular Hoy
Formateador YAML Reindenta un YAML desordenado, encuentra el error con su número de línea y léelo como JSON. Conserva tus comentarios, escalares de bloque y anclas. Funciona en tu navegador.
Nuevo
Editor Markdown Escribe Markdown y ve el resultado renderizado al lado. Admite títulos, listas, tablas, bloques de código y enlaces; copia el HTML o descarga archivos .md y .html. Funciona en tu navegador.

Herramientas de Desarrollo Relacionadas

Formateador JSON Formatea, minifica y valida JSON en el navegador. El error se señala por línea y columna, y un árbol plegable muestra la estructura.
Minificar CSS Comprime CSS quitando comentarios y espacios, o vuelve a expandirlo con sangría limpia. Respeta los espacios de calc(), las cadenas y las licencias.
Formateador XML Indenta XML desordenado para poder leerlo, o compáctalo. Entiende RSS, CDATA y espacios de nombres, y nunca reescribe tu documento.
Formateador SQL Reparte una consulta larga en líneas legibles, o compáctala de nuevo en una. Mantiene tus mayúsculas, tus nombres entrecomillados y tus cadenas tal cual.
Minificador JavaScript Reduce JavaScript con Terser, el motor de las herramientas de build. Analiza el código en vez de adivinarlo, así el comportamiento sobrevive. Nada se sube.

Otras herramientas que pueden interesarte

Word a PDF Convierte Word a PDF gratis: sube un archivo DOC, DOCX, ODT o RTF y descarga un PDF bien formateado en segundos, sin registro ni marca de agua.
PDF a Word Convierte PDF a Word gratis: sube un PDF y descarga un DOCX editable en segundos - sin registro, sin marca de agua y sin instalar nada.
Contador de Palabras Contador de palabras gratuito: pega un texto para contar palabras, caracteres, frases y párrafos, y ver el tiempo estimado de lectura sin subir nada.
Contador de Caracteres Contador de caracteres gratuito: caracteres con y sin espacios, palabras y líneas, además de los límites SEO de títulos y meta descripciones.
Comprobador de Densidad de Palabras Clave Analizador de densidad de palabras clave gratuito: pega un texto o una URL y mira la frecuencia de cada palabra y frase, en porcentaje.