Ilmainen online-HTML Beautifier / Formatter

Input data
bfotool loadding
Output data
bfotool loadding

HTML-muotoilija

Kirjoita sotkuinen, minimoitu tai hämärtynyt HTML-koodi yllä olevaan kenttään, jotta se puhdistetaan ja tehdään kauniiksi. Yllä oleva editori sisältää myös hyödyllisiä rivinumeroita ja syntaksin korostuksia. On monia vaihtoehtoja räätälöidä kaunistaja henkilökohtaisen muotoilun makusi mukaan.

Milloin käytät HTML Vieweria, HTML Formatteria tai HTML Formatteria?

Usein HTML-koodia kirjoitettaessa sisennykset, välit ja muut muotoilut voivat muuttua hieman sekaisiksi. On myös tavallista, että useat kehittäjät työskentelevät yhden projektin parissa, joilla on erilaiset muotoilutekniikat. Tämä työkalu on hyödyllinen tiedoston muotoilun yhdenmukaistamiseksi. On myös yleistä, että HTML on minimoitu tai hämärtynyt. Voit käyttää tätä työkalua saadaksesi koodin näyttämään kauniilta ja luettavalta, jotta sitä on helpompi muokata.

Esimerkkejä HTML-muotoilusta

Pienempi HTML-koodi alla:

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div><ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3</a></li></ul> </div></nav>

Kaunistuu tästä:

<nav class="navbar navbar-default">
     <div class="container-fluid">
         <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> 
         </div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a>
             </li>
             <li><a href="#">Page 1</a>
             </li>
             <li><a href="#">Page 2</a>
             </li>
             <li><a href="#">Page 3</a>
             </li>
         </ul>
     </div>
 </nav>