Formatowanie HTML

Jak sformatować HTML

1. Wklej kod HTML albo kliknij Otwórz plik, aby wczytać plik .html lub .htm (do 10 MB).
2. Wybierz Wcięcie (2 spacje, 4 spacje lub tabulator) i zdecyduj, czy chcesz Zawijaj wiersze po 80 lub 120 znakach.
3. Zaznacz Wcinaj i , jeśli chcesz, by były wcięte wewnątrz <html>, oraz Usuń komentarze, aby pozbyć się komentarzy <!-- … -->.
4. Kliknij Formatuj (upiększ), aby otrzymać czytelny kod, albo Minifikuj, aby uzyskać najmniejszą bezpieczną wersję.
5. Skopiuj lub pobierz wynik. Wiersz stanu pokazuje rozmiar przed i po.

Wynik jest wyświetlany jako zwykły tekst w polu wynikowym. Twój HTML nigdy nie jest renderowany ani uruchamiany na tej stronie, więc skrypty w wklejonym kodzie nie mogą niczego zrobić. Nic nie jest wysyłane na serwer.

Formatowanie: czytelny HTML ze spójnymi wcięciami

Formatuj (upiększ) korzysta z js-beautify, formatera stosowanego w wielu edytorach kodu:

• elementy blokowe trafiają do osobnych wierszy z wcięciem zależnym od zagnieżdżenia, a elementy liniowe, takie jak <a>, <b> czy <span>, zostają w tekście;
• zawartość <script> i <style> jest formatowana jako JavaScript i CSS;
• <pre> i <textarea> pozostają dokładnie w takiej postaci, w jakiej je zapisano, bo ich białe znaki są widoczne;
• kolejne puste wiersze są redukowane do jednego;
• przy ustawionej szerokości zawijania długie wiersze tekstu i długie listy atrybutów są zawijane.

Formatowanie nie naprawia błędnych znaczników: niezamknięty <div> pozostaje niezamknięty, a wcięcia po nim pokazują, gdzie leży problem.

Minifikacja: mniejszy HTML bez zmiany wyglądu strony

Minifikuj stosuje celowo ostrożne podejście:

• ciągi spacji, tabulatorów i znaków nowego wiersza w tekście zamieniają się w jedną spację, dokładnie tak, jak wyświetla je przeglądarka;
• białe znaki obok elementów blokowych i elementów nagłówka (<div>, <p>, <li>, <td>, <meta>, <br>…) są usuwane, bo nigdy nie są renderowane;
• pojedyncza spacja między elementami liniowymi zostaje, więc <b>wielki</b> <i>świat</i> nie zmieni się w „wielkiświat”;
• komentarze są usuwane, gdy zaznaczono Usuń komentarze, z wyjątkiem komentarzy warunkowych (<!--[if IE]>) i komentarzy zaczynających się od <!--!;
• zawartość <script>, <style>, <pre> i <textarea> nigdy nie jest zmieniana, a wartości atrybutów pozostają dokładnie takie same, łącznie z cudzysłowami.

Minifikacja nie usuwa opcjonalnych znaczników zamykających, nie przepisuje atrybutów i nie kompresuje wbudowanego JavaScriptu ani CSS: takie optymalizacje dają odrobinę więcej, ale mogą zepsuć stronę. W przypadku większości stron kompresja HTTP (gzip lub Brotli) oszczędza znacznie więcej niż jakikolwiek minifikator, więc minifikacja przydaje się głównie dla HTML osadzonego w e-mailach, szablonach lub ciągach JavaScript.