Formatear HTML

Cómo funciona

El código fuente de una página, una plantilla de correo o lo que exporta un creador de sitios suele llegar como HTML en una sola línea o con la sangría revuelta. Pegue el código en el panel izquierdo. En el derecho, cada etiqueta de bloque (div, ul, li, table, p) queda en su propia línea, un nivel más adentro por cada nivel de anidación. Así ve qué </div> cierra cada <div> y dónde termina una lista. El CSS de <style> y el JavaScript de <script> se formatean con la misma sangría. El contenido de <pre> y <textarea> no se toca, porque ahí cada espacio se ve en la página. Las etiquetas en línea como a, span y strong se quedan en la línea de su texto. Las líneas largas se cortan a los 120 caracteres por defecto; si no quiere cortes, cambie Líneas largas a Dejarlas como están. La línea de resultado indica cuántas líneas obtuvo. Si cambia ¿Qué quiere hacer? a Minificado, la herramienta hace lo contrario: quita comentarios y espacios entre etiquetas, sin tocar en ese modo el contenido de <style> y <script>.

Esta herramienta también se busca como formatear html, html formatter online, embellecer html, indentar html, html beautifier, ordenar codigo html.

¿Qué es HTML?

El HTML (HyperText Markup Language) es el lenguaje de marcado que da estructura a una página web: títulos, párrafos, listas, tablas, enlaces e imágenes se marcan cada uno con una etiqueta (<h2>, <p>, <ul>, <a>), y las etiquetas se meten unas dentro de otras formando un árbol. El navegador reduce casi todos los espacios y saltos de línea entre etiquetas; por eso la misma página puede ir en una línea o bien sangrada, y la sangría solo sirve para mostrar ese árbol a las personas.

¿Qué es Elemento de bloque y elemento en línea?

Los elementos de bloque (div, p, ul, table, h1-h6) empiezan en una línea nueva y ocupan todo el ancho disponible; los elementos en línea (a, span, strong, img) se colocan dentro del texto. Para formatear, la diferencia importa: un salto de línea entre bloques no cambia nada en pantalla, pero entre dos elementos en línea se muestra como un espacio. Por eso un formateador mantiene los elementos en línea en la línea de su texto.

¿Qué diferencia hay entre formatear y minificar HTML?

Formatear añade sangría y saltos de línea para que el código se pueda leer; el archivo crece y la página se ve igual. Minificar hace lo contrario: quita comentarios y espacios de más entre etiquetas y, si se pide, comprime también el CSS y el JavaScript incrustados; el archivo se reduce pero cuesta leerlo. Ninguno de los dos toca el contenido de <pre>. Lo habitual es conservar la fuente con sangría y publicar la copia minificada.

Formatear no es validar

La herramienta ordena el HTML pero no lo revisa: una etiqueta sin cerrar, elementos mal anidados o un atributo mal escrito no se señalan. La validación oficial se hace con el validador del W3C, y ese servicio envía su código a su propio servidor; esta página no envía nada a ningún lado, así que no hace ese trabajo.

Aun así, la sangría deja ver los errores: cuando un <div> nunca se cierra, todo lo que sigue queda un nivel de más hacia la derecha y al final del documento aparece una serie extraña de etiquetas de cierre. Formatear no cambia el aspecto de la página, con una excepción: un salto de línea añadido entre dos elementos en línea se muestra como un espacio. Por eso las líneas largas se cortan entre palabras en el texto corrido.

¿Con sangría o minificado?

El HTML con sangría sirve para leer y editar: entender una plantilla, encontrar un error, mandar código a un colega. El HTML minificado sirve para publicar: las plantillas de correo tienen límites de tamaño y cada kilobyte cuenta para la velocidad de una página.

La opción Minificado de esta página solo comprime el HTML: quita los comentarios (salvo los comentarios condicionales para el viejo Internet Explorer), elimina los espacios entre etiquetas y protege <pre> y <textarea>. Para minificar también el CSS y el JavaScript incrustados, conservar comentarios o ver una comparación de bytes antes y después, use la herramienta Minificar HTML.

Preguntas frecuentes

¿Cómo formateo un HTML que está en una sola línea?

Pegue el código en el panel izquierdo de esta página. Cada etiqueta de bloque pasa a su propia línea y recibe sangría según su nivel de anidación. Copie el resultado o descárguelo como archivo .html.

¿Formatear cambia el aspecto de la página?

Entre etiquetas de bloque, no, porque el navegador ignora ahí los espacios. Un salto de línea añadido entre elementos en línea como span o a se muestra como un solo espacio; por eso el formateador deja los elementos en línea en la misma línea siempre que puede. El contenido de <pre> y <textarea> nunca se modifica.

¿La herramienta muestra los errores de mi HTML?

No, no es un validador. Una etiqueta sin cerrar se nota porque la sangría se desplaza a la derecha, pero no se señala como error. Para una validación oficial existe el validador del W3C, que envía su código a su servidor.

¿Mi código se envía a algún lugar?

No. El formateo se hace en su navegador; el HTML que pega no sale de esta página ni se guarda en ningún lugar.