Vai al contenuto
Strumento gratuito

Formatter HTML online: formatta il codice HTML e CSS

Il formatter HTML, detto anche HTML Beautifier, trasforma HTML e CSS minificati o disordinati in codice leggibile e indentato: per esempio, la riga body{margin:0;font-family:Arial,sans-serif}… diventa un insieme di regole CSS ben indentate, con 2 o 4 spazi oppure tab. Il linguaggio viene riconosciuto automaticamente. Gratis, senza registrazione: il tuo codice resta nel tuo browser.

Creato da Luca Stanek

Codice pronto? Metti online il tuo sito con un hosting web veloce e affidabile.

Pubblica il tuo sito

Codice formattato

Il codice formattato apparirà qui non appena incolli qualcosa a sinistra.

Incolla il tuo codice a sinistra o carica un esempio. Il risultato appare subito.

Il tuo codice resta nel tuo browser: non viene caricato né salvato.

Risultato di esempio

Cosa fa questo Formatter HTML e CSS al tuo codice

Codice così come esce da un minificatore o da un editor, con il risultato rientrato di 2 spazi.

HTML

Input:

<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>

Risultato:

<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

Input:

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}}

Risultato:

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;
  }
}

Panoramica

Cos'è un formattatore HTML?

Un HTML Formatter, detto anche HTML Beautifier, rende il codice HTML e CSS più leggibile: un elemento della struttura per riga e rientri uniformi. Rileva automaticamente il linguaggio, usa rientri di 2 o 4 spazi oppure tabulazioni, apre file fino a 2 MB e modifica solo spazi e interruzioni di riga, salvo aggiungere l'eventuale punto e virgola finale mancante nel CSS. Funziona gratis nel tuo browser, senza caricare file.

Formatta HTML

Gli elementi di blocco occupano righe separate e sono rientrati; il testo continuo va a capo dopo 100 caratteri. Se vuoi, i tag lunghi avranno un attributo per riga.

Formattare e migliorare la leggibilità del CSS

Selettori, dichiarazioni e parentesi graffe occupano righe separate, anche all'interno di @media. Gli elenchi lunghi di valori, come transition, vengono distribuiti su più righe.

Lingua rilevata automaticamente

I tag indicano HTML; le parentesi graffe, le @-regole o le proprietà con i due punti indicano CSS. Puoi anche impostare manualmente HTML o CSS.

Avvisi con riga e colonna

Lo strumento segnala tag e parentesi non chiusi indicando riga e colonna; con un clic evidenzi il punto nel testo inserito. Non è uno strumento di convalida.

Risultato con evidenziazione della sintassi

Vedi anche il numero di righe e di elementi o, a seconda del caso, di regole e dichiarazioni. I risultati oltre 150.000 caratteri vengono mostrati senza colori.

Nel browser, senza caricamento

Il tuo codice non viene né caricato né salvato. Puoi aprire file fino a 2 MB e copiare o scaricare il risultato.

Come funziona

Come formattare HTML e CSS online

Cinque passaggi, senza registrazione né installazione.

Passaggio 1

Incolla il codice

Incolla HTML o CSS nel campo a sinistra, apri un file (.html, .htm, .xhtml, .css o .txt, fino a 2 MB) oppure carica l’esempio HTML o CSS.

Passaggio 2

Controlla la lingua

Lascia la lingua su Automatico oppure seleziona HTML o CSS. La lingua rilevata appare sotto il risultato.

Passaggio 3

Scegli rientro

Usa 2 spazi, 4 spazi o un tab per l'indentazione. Per HTML, scegli se mandare a capo gli attributi dei tag lunghi o mantenerli sulla stessa riga.

Passaggio 4

Controlla le indicazioni

Gli avvisi e gli errori indicano riga e colonna. Clicca sul link accanto per evidenziare il punto nel tuo input.

Passaggio 5

Applica il risultato

Copia il codice formattato o scaricalo come formatted.html o formatted.css.

Regole

Come funziona il Formatter HTML e CSS

Elementi di blocco

div, ul, table e altri elementi sono su righe separate, con i contenuti rientrati. Gli elementi brevi, come un paragrafo, restano su una sola riga.

Testo continuo

Gli spazi multipli diventano uno e i paragrafi lunghi vanno a capo dopo 100 caratteri. Lo spazio tra i tag inline viene mantenuto.

Tag lunghi

Se un tag non entra in una riga, ogni attributo viene messo su una riga separata. Puoi disattivare questa opzione.

Invariato

Il contenuto di pre e textarea, i commenti, i valori degli attributi e i testi restano invariati. style viene formattato come CSS; script può al massimo essere rientrato nuovamente.

CSS: selettori, dichiarazioni e parentesi graffe sono su righe separate; viene aggiunto il punto e virgola finale se manca. Limiti: il codice non viene validato, JavaScript non viene riformattato, SCSS e Less non sono supportati.

Scopri di più

Altri strumenti

Confrontare testi online (Diff Checker)

Confronta online due testi, configurazioni o versioni di codice, visualizza le differenze riga per riga e parola per parola e copiale come Unified Diff. Funziona interamente nel browser.

Creato da Dimitri Heissler

Formatter JSON

Formatta, minimizza e convalida JSON con evidenziazione della sintassi, indicazione degli errori e download, interamente nel browser.

Creato da Jakub Martyniak

Formattatore e validatore XML

Convalida, formatta, minimizza e ripara automaticamente l'XML (caratteri senza escape, tag mancanti, dichiarazione mancante): 100 % nel browser, senza caricamento.

Creato da Justin Schuessler

Tester Regex

Testi le espressioni regolari in tempo reale con il motore JavaScript nativo: evidenziazione delle corrispondenze, gruppi di cattura e modalità di sostituzione, tutto nel browser.

Creato da Jakub Martyniak

Codificatore e decodificatore URL

Codifica e decodifica URL e testo online: confronto tra encodeURIComponent, encodeURI e formato dei moduli, con tabella dei parametri di query e generatore di link UTM. Funziona interamente nel browser.

Creato da Dimitri Heissler

Generatore .htaccess e generatore htpasswd

Crea online file Apache .htaccess e .htpasswd: reindirizzamenti 301, HTTPS, protezione con password bcrypt, regole WordPress, pagine di errore, caching, GZIP e protezione contro l’hotlinking. Funziona interamente nel browser.

Creato da Dimitri Heissler

Editor Markdown

Scrivi Markdown online con anteprima in tempo reale: README per GitHub e messaggi Discord, tabelle da Excel, esportazione in PDF o HTML. Tutto nel browser.

Creato da Dimitri Heissler

Formattatore SQL online (formatta e abbellisci SQL)

Formatta, abbellisci e minimizza SQL online per MySQL, MariaDB e PostgreSQL, con rientri e maiuscole per le parole chiave. Funziona interamente nel browser, senza caricamenti.

Creato da Luca Stanek

Selettore colori

Converti i colori in tempo reale tra HEX, RGB, HSL, HSV e CMYK, trova il colore CSS con nome più simile e verifica il contrasto WCAG rispetto al bianco e al nero, tutto nel browser.

Creato da Justin Schuessler

FAQ

Domande frequenti

Risposte brevi su come formattare HTML e CSS con questo strumento.

Un HTML Formatter, detto anche Beautifier, rende il codice più leggibile: un elemento della struttura per riga e rientri uniformi. È utile per il codice minificato, il sorgente copiato dal browser o il codice scritto in un editor senza funzione di formattazione. Questo formatter elabora HTML e CSS.

Incolla il codice a sinistra: il risultato appare subito a destra. Scegli il rientro con 2 spazi, 4 spazi o un tab e decidi se mandare a capo gli attributi dei tag lunghi. Poi copia il risultato o scaricalo come formatted.html.

Incolla il CSS: lo strumento lo riconosce dalle parentesi graffe, dalle regole @ o dalle proprietà con i due punti, ma puoi anche selezionare CSS manualmente. Ogni regola viene distribuita su righe separate per selettore, dichiarazioni e parentesi, anche all'interno di @media. Gli elenchi lunghi di valori, come transition, vengono suddivisi su più righe e viene aggiunto l'eventuale punto e virgola finale mancante. Il file scaricato si chiama formatted.css.

No. Cambiano solo spazi e interruzioni di riga. Tag, attributi, valori, testi e commenti restano invariati. Unica eccezione: nel CSS viene aggiunto un punto e virgola mancante dopo l'ultima dichiarazione.

Il formatter modifica solo spazi, rientri e interruzioni di riga nel codice sorgente per renderlo più leggibile. Per formattare il testo in HTML usi tag come strong, em o br. Lo strumento non aggiunge né modifica questi tag.

Il contenuto di pre e textarea resta invariato, perché lì ogni spazio conta. Il CSS in style viene formattato; script può essere rientrato nuovamente, ma non riformattato.

No, non convalida né minifica il codice. Formatta solo HTML e CSS: non riformatta JavaScript all'interno di script e non supporta SCSS e Less. Segnala però i tag non chiusi, i tag di chiusura senza un tag di apertura e le parentesi graffe senza corrispondenza, indicando riga e colonna. Se un commento, una stringa tra virgolette o un tag non è terminato, al posto del risultato compare un messaggio di errore.

No. Tutto avviene nel tuo browser, senza caricamenti né salvataggi. Puoi aprire file fino a 2 MB: .html, .htm, .xhtml, .css o .txt.

Hai altre domande?

Contatta il supporto
Stai creando un sito web?

Il tuo sito web ha bisogno di un hosting affidabile

Un VPS di ZAP-Hosting mette online il tuo sito in modo affidabile.

4,4/5 Trustpilot32.000+ Server attiviDal 2010
Visualizza hosting

Nessuna configurazione. Nessun rischio. Online in pochi secondi.

Durata flessibileDisdicibile in qualsiasi momentoOnline in 60 secondi

Cerchi altri strumenti? Visualizza tutti gli strumenti per sviluppatori