Saltar al contenido
Herramienta gratuita

Formateador de HTML online: mejora el formato del código HTML y CSS

El formateador de HTML, también llamado HTML Beautifier, convierte HTML y CSS minificados o desordenados en código legible y con sangría. Por ejemplo, transforma la línea body{margin:0;font-family:Arial,sans-serif}… en reglas CSS bien indentadas, con 2 o 4 espacios o tabulaciones. Detecta el lenguaje automáticamente. Es gratis, no requiere registro y tu código permanece en tu navegador.

Creado por Luca Stanek

¿Ya tienes el código listo? Publica tu sitio con un hosting web rápido y fiable.

Publica tu sitio web

Código formateado

El código formateado aparecerá aquí cuando pegues algo a la izquierda.

Pega tu código a la izquierda o carga un ejemplo. El resultado aparecerá al instante.

Tu código permanece en tu navegador: no se sube ni se guarda.

Resultado de ejemplo

Qué hace este formateador de HTML y CSS con tu código

Código tal como sale de un minificador o editor, y el resultado con una sangría de 2 espacios.

HTML

Entrada:

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Resultado:

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Entrada:

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Resultado:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Vista general

¿Qué es un HTML Formatter?

Un formateador de HTML, también llamado HTML Beautifier, organiza el código HTML y CSS para que sea legible: una estructura por línea y una sangría uniforme. Detecta el lenguaje automáticamente, aplica sangrías de 2 o 4 espacios o una tabulación, abre archivos de hasta 2 MB y solo modifica espacios y saltos de línea, salvo si falta el último punto y coma en CSS. Funciona gratis en tu navegador, sin subir archivos.

Formatear HTML

Los elementos de bloque aparecen en líneas separadas y con sangría; el texto seguido se ajusta a los 100 caracteres. Si quieres, los tags largos muestran un atributo por línea.

Formatear y embellecer CSS

Los selectores, las declaraciones y las llaves van en líneas separadas, también dentro de @media. Las listas largas de valores, como transition, se dividen en varias líneas.

Idioma detectado automáticamente

Las etiquetas indican HTML; las llaves, las reglas @ o las propiedades con dos puntos indican CSS. También puedes seleccionar HTML o CSS manualmente.

Advertencias con línea y columna

La herramienta indica la línea y la columna de las etiquetas y llaves sin cerrar; al hacer clic, se resalta el lugar en el texto introducido. No es un validador.

Resultado con resaltado de sintaxis

También verás el número de líneas, así como de elementos o reglas y declaraciones. Los resultados de más de 150.000 caracteres se muestran sin colores.

En el navegador, sin subir archivos

Tu código no se sube ni se guarda. Puedes abrir archivos de hasta 2 MB y copiar o descargar el resultado.

Cómo funciona

Cómo formatear HTML y CSS online

Cinco pasos, sin registro ni instalación.

Paso 1

Pegar código

Pega HTML o CSS en el campo de la izquierda, abre un archivo (.html, .htm, .xhtml, .css o .txt, hasta 2 MB) o carga el ejemplo de HTML o CSS.

Paso 2

Comprobar idioma

Deja el idioma en Automático o selecciona HTML o CSS. El idioma detectado aparece debajo del resultado.

Paso 3

Elegir sangría

Usa 2 espacios, 4 espacios o un tabulador para la sangría. En HTML, decide si los atributos de las etiquetas largas se dividen en varias líneas o permanecen en una sola.

Paso 4

Comprobar indicaciones

Las advertencias y los errores indican la línea y la columna. Haz clic en el enlace contiguo para resaltar la posición en tu entrada.

Paso 5

Aplicar resultado

Copia el código formateado o descárgalo como formatted.html o formatted.css.

Reglas

Cómo funciona el formateador de HTML y CSS

Elementos de bloque

div, ul, table y otras etiquetas aparecen en líneas separadas, con el contenido sangrado. Los elementos cortos, como un párrafo, permanecen en una sola línea.

Texto continuo

Los espacios múltiples se reducen a uno y los párrafos largos se dividen a los 100 caracteres. Se conserva el espacio entre etiquetas en línea.

Etiquetas largas

Si una etiqueta no cabe en una línea, cada atributo aparece en una línea distinta. Puedes desactivar esta opción.

Sin cambios

El contenido de pre y textarea, los comentarios, los valores de los atributos y los textos permanecen intactos. style se formatea como CSS; script, como mucho, se vuelve a sangrar.

CSS: los selectores, las declaraciones y las llaves aparecen en líneas separadas; se añade el punto y coma final si falta. Limitaciones: el código no se valida, JavaScript no se reformatea y SCSS y Less no son compatibles.

Descubrir más

Más herramientas

Comparar textos online (Diff Checker)

Compara textos online: compara dos textos, configuraciones o versiones de código, ve las diferencias por línea y palabra y cópialas como Unified Diff. Funciona íntegramente en el navegador.

Creado por Dimitri Heissler

Formateador de JSON

Formatea, minifica y valida JSON con resaltado de sintaxis, indicación de errores y descarga, todo en el navegador.

Creado por Jakub Martyniak

Formateador y validador de XML

Valida, formatea, minimiza y repara automáticamente XML (caracteres sin escapar, etiquetas ausentes, declaración ausente), 100 % en el navegador, sin subir archivos.

Creado por Justin Schuessler

Probador de Regex

Prueba expresiones regulares en tiempo real con el motor nativo de JavaScript, con resaltado de coincidencias, grupos de captura y modo de reemplazo, directamente en el navegador.

Creado por Jakub Martyniak

Codificador y decodificador de URL

Codifica y decodifica URL y texto en línea: compara encodeURIComponent, encodeURI y el formato de formulario, con una tabla de parámetros de consulta y un generador de enlaces UTM. Funciona íntegramente en el navegador.

Creado por Dimitri Heissler

Generador de .htaccess y generador de htpasswd

Crea archivos .htaccess y .htpasswd para Apache en línea: redirecciones 301, HTTPS, protección con contraseña bcrypt, reglas de WordPress, páginas de error, caché, GZIP y protección contra hotlinking. Funciona íntegramente en el navegador.

Creado por Dimitri Heissler

Editor de Markdown

Escribe Markdown online con vista previa en directo: README para GitHub y mensajes de Discord, tablas de Excel y exportación a PDF o HTML. Todo en el navegador.

Creado por Dimitri Heissler

Formateador de SQL online (formatea y mejora tu SQL)

Formatea, mejora y minimiza SQL online para MySQL, MariaDB y PostgreSQL, con opciones de sangría y mayúsculas para las palabras clave. Funciona íntegramente en el navegador, sin subir archivos.

Creado por Luca Stanek

Selector de color

Convierte colores al instante entre HEX, RGB, HSL, HSV y CMYK, encuentra el color CSS con nombre más cercano y comprueba el contraste WCAG frente al blanco y el negro, todo en tu navegador.

Creado por Justin Schuessler

FAQ

Preguntas frecuentes

Respuestas breves sobre cómo formatear HTML y CSS con esta herramienta.

Un formateador de HTML, también llamado beautifier, organiza el código para que sea legible: una estructura por línea y una sangría uniforme. Resulta útil para código minificado, código fuente del navegador o código de un editor sin función de formato. Este formateador procesa HTML y CSS.

Pega el código a la izquierda y el resultado aparecerá al instante a la derecha. Elige la sangría de 2 espacios, 4 espacios o una tabulación y decide si los atributos de las etiquetas largas se distribuyen en varias líneas. Después, copia el resultado o descárgalo como formatted.html.

Pega el CSS: la herramienta lo reconoce por las llaves, las reglas @ o las propiedades con dos puntos, aunque también puedes seleccionar CSS manualmente. Cada regla dispone el selector, las declaraciones y las llaves en líneas separadas, incluso dentro de @media. Las listas largas de valores, como las de transition, se distribuyen en varias líneas y se añade el punto y coma final si falta. El archivo descargado se llama formatted.css.

No. Solo cambian los espacios y los saltos de línea. Las etiquetas, los atributos, los valores, los textos y los comentarios se mantienen. La única excepción: en CSS se añade un punto y coma si falta después de la última declaración.

El formateador solo cambia los espacios, la sangría y los saltos de línea del código fuente para que sea más fácil de leer. En HTML, el texto se formatea con etiquetas como strong, em o br. La herramienta no añade ni modifica esas etiquetas.

El contenido de pre y textarea no se modifica porque cada espacio cuenta. El CSS de style se formatea; script, como mucho, se vuelve a sangrar, pero no se reformatea.

No, no valida ni minifica el código. Solo da formato a HTML y CSS: no reformatea el JavaScript dentro de script y no admite SCSS ni Less. Sí avisa de etiquetas sin cerrar, etiquetas de cierre sin etiqueta de apertura y llaves sin pareja, con la línea y la columna correspondientes. Si un comentario, un texto entre comillas o una etiqueta quedan sin cerrar, aparece un mensaje de error en lugar del resultado.

No. Todo se ejecuta en tu navegador, sin subir ni guardar nada. Puedes abrir archivos de hasta 2 MB: .html, .htm, .xhtml, .css o .txt.

¿Tienes más preguntas?

Contactar con soporte
¿Estás creando una página web?

Tu sitio web necesita un hosting fiable

Un VPS de ZAP-Hosting mantiene tu sitio online de forma fiable.

4,4/5 Trustpilot32.000+ Servidores activosDesde 2010
Ver hosting

Sin configuración. Sin riesgos. En línea en segundos.

Duración flexibleCancelable en cualquier momentoEn línea en 60 segundos

¿Buscas más herramientas? Ver todas las herramientas para desarrolladores