Formattatore HTML

Cos'è la formattazione HTML?

Un formattatore HTML è uno strumento che esegue la formattazione HTML (chiamata anche abbellimento o pretty-printing): aggiunge indentazione, interruzioni di riga e spaziatura coerenti al markup HTML in modo da rendere visibile la struttura di annidamento. I browser ignorano gli spazi bianchi durante il rendering dell'HTML, quindi un documento scritto su una singola riga produce lo stesso output di uno con un'indentazione accurata. La differenza è interamente per gli esseri umani: l'HTML formattato è più facile da leggere, debuggare e mantenere.

La specifica HTML (mantenuta da WHATWG come HTML Living Standard) definisce oltre 110 elementi, ciascuno con il proprio modello di contenuto. Gli elementi a livello di blocco come <div>, <section> e <article> iniziano tipicamente su una nuova riga e indentano i propri figli. Gli elementi void come <br>, <img> e <input> non hanno tag di chiusura né figli da indentare. Un buon formattatore comprende queste distinzioni e applica le regole di indentazione di conseguenza, invece di aggiungere ciecamente spazi bianchi dopo ogni tag.

La formattazione è più importante durante lo sviluppo. L'HTML minificato o generato da macchine, l'output delle piattaforme CMS e il markup copiato dai DevTools del browser arrivano spesso come un'unica riga densa. Senza una corretta indentazione, trovare un tag di chiusura mancante o tracciare una struttura profondamente annidata richiede molto più tempo. Un formattatore HTML trasforma quella parete di testo in un albero correttamente indentato e leggibile in un unico passaggio.

Perché usare questo Formattatore HTML?

Incolla qualsiasi HTML e ottieni immediatamente un output correttamente indentato. Nessun plugin da installare, nessun file di configurazione da scrivere, nessun account da creare.

Casi d'uso del Formattatore HTML

Regole di indentazione HTML

Il modo in cui un formattatore HTML tratta ogni tipo di elemento dipende dal suo modello di contenuto. La tabella seguente mostra gli elementi comuni e come vengono indentati con le impostazioni a 2 spazi e 4 spazi. Entrambe producono un rendering identico nel browser; la differenza è la leggibilità.

Formattatore vs. Minificatore vs. Linter

Questi tre strumenti operano sull'HTML ma servono scopi diversi. Formattazione e minificazione sono trasformazioni opposte; il linting controlla gli errori senza modificare gli spazi bianchi.

Esempi di codice

Come formattare HTML a livello programmatico nei linguaggi e strumenti più diffusi:

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

Domande frequenti