HTML-muotoilija

Näin muotoilet HTML:ää

1. Liitä HTML-koodisi tai napsauta Avaa tiedosto ladataksesi .html- tai .htm-tiedoston (enintään 10 Mt).
2. Valitse Sisennys (2 välilyöntiä, 4 välilyöntiä tai sarkain) ja se, Rivitä rivit kohdassa 80 vai 120 merkkiä.
3. Rastita Sisennä ja , jos haluat ne sisennettyinä <html>-elementin sisään, ja Poista kommentit, jos haluat poistaa <!-- … -->-kommentit.
4. Napsauta Muotoile (siisti) saadaksesi luettavaa koodia tai Pienennä saadaksesi pienimmän turvallisen version.
5. Kopioi tai lataa tulos. Tilarivi näyttää koon ennen ja jälkeen.

Tulos näytetään pelkkänä tekstinä tulostekentässä. HTML-koodiasi ei koskaan renderöidä eikä suoriteta tällä sivulla, joten liittämäsi koodin skriptit eivät voi tehdä mitään.

Siistiminen: luettava ja yhtenäisesti sisennetty HTML

Muotoile (siisti) käyttää js-beautifyta, jota monet koodieditorit käyttävät muotoilijana:

• lohkoelementit asetetaan omille riveilleen sisennettyinä sisäkkäisyyden syvyyden mukaan, kun taas tekstinsisäiset elementit, kuten <a>, <b> tai <span>, pysyvät tekstin seassa;
• <script>- ja <style>-elementtien sisältö muotoillaan JavaScriptinä ja CSS:nä;
• <pre> ja <textarea> jätetään täsmälleen sellaisiksi kuin ne on kirjoitettu, koska niiden tyhjät merkit ovat näkyviä;
• peräkkäiset tyhjät rivit supistetaan yhteen;
• rivitysleveydellä pitkät tekstirivit ja pitkät attribuuttiluettelot rivitetään.

Siistiminen ei korjaa rikkinäistä merkintää: sulkematon <div> pysyy sulkemattomana, ja sen jälkeinen sisennys näyttää, missä ongelma on.

Pienennys: pienempi HTML muuttamatta sivua

Pienennä käyttää tarkoituksella varovaista lähestymistapaa:

• tekstin peräkkäiset välilyönnit, sarkaimet ja rivinvaihdot muuttuvat yhdeksi välilyönniksi, aivan kuten selain ne näyttää;
• lohkotason ja head-elementtien (<div>, <p>, <li>, <td>, <meta>, <br>…) vieressä olevat tyhjät merkit poistetaan, koska niitä ei koskaan renderöidä;
• yksittäinen välilyönti tekstinsisäisten elementtien välillä säilytetään, joten <b>big</b> <i>world</i> ei muutu muotoon ”bigworld”;
• kommentit poistetaan, kun Poista kommentit on rastittuna, lukuun ottamatta ehdollisia kommentteja (<!--[if IE]>) ja kommentteja, jotka alkavat merkinnällä <!--!;
• <script>-, <style>-, <pre>- ja <textarea>-elementtien sisältöön ei koskaan kosketa, ja attribuuttiarvot säilytetään täsmälleen, lainausmerkit mukaan lukien.

Se ei poista valinnaisia päättäviä tunnisteita, kirjoita attribuutteja uudelleen eikä pakkaa upotettua JavaScriptiä ja CSS:ää: nämä optimoinnit säästävät hieman enemmän, mutta voivat rikkoa sivuja. Useimmilla sivuilla HTTP-pakkaus (gzip tai Brotli) säästää paljon enemmän kuin mikään pienentäjä, joten pienennys on hyödyllisintä sähköposteihin, malleihin tai JavaScript-merkkijonoihin upotetulle HTML:lle.