Formatter HTML
Upiększ chaotyczny HTML, albo zminifikuj go na produkcję.
Działa w przeglądarce. Nic, co wpiszesz, nie jest nigdzie wysyłane.
- Wcięcie 2 albo 4 spacje
- Minifikacja jednym kliknięciem
- Nic nie jest wysyłane
Jak sformatować HTML
- Wklej swój HTML.
- Wybierz rozmiar wcięcia, albo włącz minifikację.
- Skopiuj albo pobierz wynik.
Upiększanie a minifikacja
| Upiększanie | Minifikacja | |
|---|---|---|
| Wcięcie | Dodaje 2, 4 albo 8 spacji | Usuwa je |
| Komentarze | Zachowane | Usunięte |
| Białe znaki między znacznikami | Ujednolicone | Usunięte |
| Zawartość w pre, textarea, script, style | Bez zmian | Bez zmian |
Gdzie zminifikowany HTML ma znaczenie
- Strona produkcyjna wczytuje się trochę szybciej i zużywa mniej transferu, gdy znikną białe znaki i komentarze.
- Zminifikowany kod trudniej czytać w podglądzie źródła, co jest sensownym kompromisem na produkcji, ale wadą podczas debugowania.
Wskazówki do formatowania HTML
- Trzymaj czytelną, wciętą kopię w systemie kontroli wersji i minifikuj tylko to, co wdrażasz, bo ręczne debugowanie zminifikowanego kodu jest wolne.
- Wcięcie 2 spacje pasuje do głęboko zagnieżdżonego kodu, a 4 spacje łatwiej przeglądać na płytkich, prostych stronach.
Na co wcięcie wpływa, a na co nie
- Nigdy nie zmienia tego, co renderuje przeglądarka, bo białe znaki między znacznikami blokowymi i tak się zwijają.
- Może zauważalnie przesunąć odstępy między elementami liniowymi, takimi jak <span>, jeśli projekt polega tam na dokładnych białych znakach. Sprawdź te miejsca po formatowaniu.
- Nie ma wpływu na działanie JavaScript, bo struktura DOM strony i tak zostaje taka sama.
Formatter HTML: najczęstsze pytania
Co tutaj robi minifikacja?
Usuwa komentarze i białe znaki między znacznikami, nie ruszając tekstu ani atrybutów wewnątrz znaczników pre, textarea, script i style.
Czy formatowanie zmieni wygląd mojej strony?
Nie. Wcięcia i odstępy między znacznikami nie wpływają na renderowanie, więc strona wygląda tak samo przed i po.
Czy to naprawia zepsute albo niezamknięte znaczniki?
Nie. Przeformatowuje podany HTML. Napraw brakujące albo niepasujące znaczniki najpierw w swoim edytorze.
Czy mogę sformatować cały dokument HTML?
Tak, razem z doctype, head i body. Bardzo długie dokumenty mogą formatować się chwilę dłużej.
Czy to waliduje mój HTML?
Nie. Przeformatowuje albo minifikuje podany kod, i nie sprawdza brakującego tekstu alt, niezamkniętych znaczników ani innych problemów walidacyjnych.
Czy znaczniki style i script też są przeformatowywane?
Tak, przy upiększaniu. Formatter wcina CSS wewnątrz znacznika style i JavaScript wewnątrz znacznika script razem z otaczającym kodem.
Czy minifikacja usuwa komentarze używane przez system szablonów?
Standardowe komentarze HTML (<!-- ... -->) są zawsze usuwane, także te, których system szablonów mógłby używać jako znaczników. Jeśli twoje komentarze mają znaczenie gdzie indziej, użyj tylko formatowania i pomiń minifikację.
Czy mogę sformatować tylko fragment, bez całego dokumentu?
Tak. Fragment kilku znaczników formatuje się tak samo jak cała strona. Nie potrzebuje doctype, head ani body, żeby zadziałać.