HTML-siistiminen ja -minifointi – muotoile HTML verkossa ilmaiseksi

Liitä mikä tahansa HTML – jopa yksiriviinen pienennetty tuloste käännösputkesta – niin työkalu muotoilee sen uudelleen oikealla sisennyksellä, yksi tagi riviä kohden ja yhtenäisellä välistyksellä. Valitse 2, 4 tai 8 välilyönnin sisennys. Tuloste on valmis pudotettavaksi editoriin tai liitettäväksi koodikatselmoinnin kommenttiin.

Siistiminen laajentaa HTML:n luettavuuden parantamiseksi: jokainen tagi omalla rivillään, sisäkkäiset lapset sisennettyinä ja tyhjät rivit säilytettyinä osioiden välissä. Tiivistys poistaa kommentit, kutistaa peräkkäiset välilyönnit ja poistaa rivinvaihdot, jolloin tiedosto vie vähemmän tavuja. Käytä siistimistä muokkaamiseen ja tarkistamiseen, tiivistystä tuotantokäyttöön.

Ei — js-beautify (konepellin alla oleva moottori) tunnistaa script- ja style-lohkot ja muotoilee niiden sisällön asianmukaisilla JS- tai CSS-säännöillä, joten upotetut skriptit pysyvät kelvollisina ja tyylitiedostot luettavina. Itsesulkeutuvat tagit, tyhjät elementit ja nimiavaruusattribuutit (svg:xmlns, xlink:href) käsitellään kaikki oikein.

Se käsittelee tavallista HTML:ää ja HTML-tyyppisiä mallipohjia hyvin, mutta puhdas JSX (aaltosulkeisilmaisut, fragmentit, isolla alkukirjaimella kirjoitetut komponenttitunnisteet) jäsennetään HTML:nä ja voi saada pieniä kosmeettisia virheitä. Kehyskohtaiseen koodiin suosittelemme Prettieriä, joka on määritetty käyttämällesi murteelle; raa'alle HTML:lle, .htm-tiedostoille ja mallipohjille työkalumme on täydellinen.

Mitään ei lähetetä. Muotoilija toimii kokonaan selaimessasi js-beautifyn avulla, joten voit turvallisesti liittää sisäisiä sivupohjia, sähköpostiluonnoksia tai yksityistä tietoa sisältävää HTML:ää ilman, että mitään poistuu laitteeltasi.

Pakkaaminen poistaa HTML-kommentit, tiivistää tagien väliset peräkkäiset välilyönnit yhdeksi välilyönniksi ja poistaa rivinvaihdot. Tuloksena on HTML, joka renderöityy tavulleen samanlaisena mutta on tyypillisesti 10–30 % pienempi. Yhdistettynä palvelimen gzip-pakkaukseen tämä keventää sivun alkulatauksen kokoa huomattavasti sisältörikkailla sivuilla.

Kyllä — napsauta Lataa tallentaaksesi siistityn tuloksen nimellä output.html tai pienennetyn tuloksen nimellä output.min.html. Tiedosto on UTF-8-koodattu, joten se toimii yhtä hyvin englannin, kyrillisen, CJK:n ja oikealta vasemmalle luettavan sisällön kanssa.

Se on pieni, vain selaimessa toimiva työkalu — nollahosting-kustannukset — joten tarjoamme sen ilmaiseksi osana kehittäjien työkalupakkiamme. Ei mainoksia, ei tulosteen seurantaa, ei tiedostokokorajoituksia muuten kuin sen verran kuin selaimesi pystyy muistissaan käsittelemään.

Kaunista-tilassa voit valita 2, 4 tai 8 välilyönnin sisennyksen. Valitse editorisi tai koodityylisi käyttämä leveys ja kopioi sitten tulos tai lataa se nimellä output.html, jotta muotoilu siirtyy suoraan projektiisi.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

Kun liität tai muokkaat, työkalu suorittaa automaattisesti rakennetarkistuksen ja listaa kaikki sulkemattomat, täsmäämättömät tai ylimääräiset lopetustagit suoraan tulostepaneelin alla — erillistä painiketta ei tarvita. Vihreä "Rakenneongelmia ei löytynyt" -viesti vahvistaa, että merkintä on hyvin muodostettu.

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.