Käyttöohje
- Liitä HTML syöttökenttään, avaa .html-tiedosto tai kokeile esimerkkiä.
- Valitse Kaunista saadaksesi sisennettyä, luettavaa merkintää tai Minifioi saadaksesi tiiviin tulosteen.
- Kaunistaessasi valitse 2 välilyöntiä, 4 välilyöntiä tai sarkaimet ja päätä, säilytetäänkö kommentit.
- Kopioi tulos tai lataa se .html-tiedostona.
Näin se toimii
Muotoilija lukee HTML:n sallivalla tokenisoijalla, kuten selain tekee, ja kirjoittaa sen uudelleen. Se ei koskaan renderöi syötettä, joten liitetyn koodin skriptit eivät voi suorittaa eikä mitään ladata verkosta.
Kaunistus asettaa jokaisen lohkotason elementin (div, p, ul, li, section, table, …) omalle rivilleen, sisennettynä sen sisäkkäisyyden syvyyden mukaan. Teksti ja sisäkkäiset elementit, kuten a, b, em, span, code, img ja br, pysyvät yhdessä samalla rivillä, joten sanojen ja linkkien väliset välilyönnit eivät muutu tavalla, joka muuttaisi renderöityä sivua. Tekstissä olevat peräkkäiset välilyönnit ja rivinvaihdot muuttuvat yhdeksi välilyönniksi, mikä onkin tapa, jolla selaimet ne näyttävät.
pre-, textarea-, script- ja style-elementtien sisältö kopioidaan tarkalleen sellaisena kuin se on kirjoitettu, mukaan lukien välilyönnit ja mahdolliset < tai > -merkit. Tyhjät elementit, kuten br, img, input, meta ja link, eivät koskaan saa sulkevaa tagia. Itsesulkeutuvat tagit, kuten <path /> sisäkkäisessä SVG:ssä, pidetään itsesulkeutuvina.
Minifiointi tiivistää tekstin välilyönnit yksittäisiksi välilyönneiksi, poistaa välilyönnit lohkoelementtien vierestä, normalisoi attribuuttien väliset välilyönnit ja, jos ”Säilytä kommentit” on pois päältä, poistaa kommentit. Ehdolliset kommentit säilytetään aina.
Työkalu ei korjaa virheellistä HTML:ää, ei lisää puuttuvia tageja, ei järjestä attribuutteja uudelleen eikä minifioi style- ja script-elementtien sisällä olevaa CSS:ää ja JavaScriptiä. Avoimeksi jääneet elementit suljetaan niiden vanhemman lopussa, ja sulkeva tagi, jolla ei ole vastaavaa avaavaa tagia, säilytetään sellaisena kuin se on kirjoitettu.
Esimerkit
Luodun merkintäkielen lukeminen
CMS-järjestelmä tulostaa mallipohjan yhtenä pitkänä rivinä. Kaunistaminen kahdella välilyönnillä näyttää navigoinnin, listaelementit ja pääsisällön sisennettynä puuna, kun taas ”Hinnat sisältävät <strong>ALV</strong>.” pysyy yhdellä luettavalla rivillä.
Sähköpostipohjan valmistelu
Minifioi HTML-sähköposti kommentit poistettuina pienentääksesi sen kokoa. <pre>-lohko hintataulukkoineen ja upotettu <style> säilyvät täsmälleen ennallaan.
Rakenteen tarkistaminen
Kun sulkeva </div> puuttuu, kaunistettu tulos näyttää seuraavat elementit yhden tason liian syvään sisennettyinä, mikä helpottaa huomaamaan, mihin elementin olisi pitänyt päättyä.
Usein kysytyt kysymykset
Muuttaako kaunistaminen sivuni ulkoasua?
Lähes kaikissa tapauksissa ei. Lohkoelementtien sisällä oleva tyhjä tila kutistetaan ja siirretään rivinvaihdoiksi, joita selaimet eivät huomioi. Teksti- ja inline-elementit pysyvät samalla rivillä, eikä pre-, textarea-, script- ja style-sisältöön kosketa. Poikkeuksena ovat sivut, jotka käyttävät tavallisissa elementeissä CSS-ominaisuutta white-space: pre.
Minifioiko se sivun sisäisen CSS:n ja JavaScriptin?
Ei. Script- ja style-sisällöt säilytetään täsmälleen sellaisina kuin ne on kirjoitettu, joten ne eivät voi rikkoutua. Käytä CSS-muotoilijaa erillisen tyylitiedoston minifiointiin.
Onko turvallista liittää HTML:ää tuntemattomasta lähteestä?
Kyllä. Syöte käsitellään puhtaasti tekstinä, eikä sitä koskaan lisätä sivulle, joten sen skriptejä ei suoriteta eikä sen kuvia tai linkkejä ladata.
Validoiko se HTML:ni?
Ei. Se on tarkoituksella salliva ja muotoilee rikkinäistä merkintää sen hylkäämisen sijaan. Yhteensopimattomat sulkevat tagit säilytetään, joten sisennys auttaa havaitsemaan ne, mutta virheluetteloa ei tuoteta.
Tietosuoja
HTML-koodisi käsitellään vain selaimessasi, eikä sitä koskaan renderöidä tai ladata palvelimelle. Mitään ei tallenneta eikä sisällytetä analytiikkaan.