Jak używać

Wklej HTML do pola wejściowego, otwórz plik .html lub wypróbuj przykład.
Wybierz Upiększ, aby uzyskać wcięty, czytelny kod, lub Minifikuj, aby uzyskać zwarty wynik.
Podczas upiększania wybierz 2 spacje, 4 spacje lub tabulatory i zdecyduj, czy komentarze mają zostać zachowane.
Skopiuj wynik lub pobierz go jako plik .html.

Jak to działa

Formatter odczytuje HTML za pomocą tolerancyjnego tokenizera, podobnie jak przeglądarka, i zapisuje go ponownie. Nigdy nie renderuje danych wejściowych, więc skrypty we wklejonym kodzie nie mogą się uruchomić i nic nie jest pobierane z internetu.

Beautify umieszcza każdy element blokowy (div, p, ul, li, section, table, …) w osobnej linii, z wcięciem zależnym od głębokości zagnieżdżenia. Tekst i elementy liniowe, takie jak a, b, em, span, code, img i br, pozostają razem w jednej linii, więc spacje między wyrazami i linkami nie są zmieniane w sposób wpływający na wyświetlaną stronę. Ciągi spacji i znaków nowej linii w tekście stają się pojedynczą spacją, co i tak odpowiada sposobowi wyświetlania ich przez przeglądarki.

Zawartość elementów pre, textarea, script i style jest kopiowana dokładnie tak, jak zapisano, łącznie z białymi znakami oraz znakami < i >. Elementy puste, takie jak br, img, input, meta i link, nigdy nie otrzymują znacznika zamykającego. Znaczniki samozamykające, takie jak <path /> w osadzonym SVG, są zachowywane jako samozamykające.

Minify zamienia ciągi białych znaków w tekście na pojedyncze spacje, usuwa białe znaki obok elementów blokowych, normalizuje odstępy między atrybutami i, jeśli opcja „Zachowaj komentarze” jest wyłączona, usuwa komentarze. Komentarze warunkowe są zawsze zachowywane.

Narzędzie nie naprawia nieprawidłowego HTML, nie dodaje brakujących znaczników, nie zmienia kolejności atrybutów ani nie minimalizuje kodu CSS i JavaScript wewnątrz elementów style i script. Elementy, które pozostały otwarte, są zamykane na końcu swojego elementu nadrzędnego, a znacznik zamykający bez pasującego znacznika otwierającego pozostaje w takiej postaci, w jakiej został zapisany.

Przykłady

Czytanie wygenerowanego kodu HTML

System CMS generuje szablon jako jedną długą linię. Beautify z 2 spacjami pokazuje nawigację, elementy listy i główną treść jako wcięte drzewo, a zdanie „Ceny zawierają <strong>VAT</strong>.” pozostaje w jednej czytelnej linii.

Przygotowanie szablonu e-maila

Zminifikuj wiadomość e-mail w HTML z wyłączonymi komentarzami, aby zmniejszyć jej rozmiar. Blok <pre> z tabelą cen i osadzony <style> pozostają dokładnie w takiej postaci, w jakiej były.

Sprawdzanie struktury

Gdy brakuje zamykającego znacznika </div>, sformatowany wynik pokazuje kolejne elementy wcięte o jeden poziom za głęboko, co ułatwia zorientowanie się, gdzie element powinien się kończyć.

Często zadawane pytania

Czy upiększanie zmieni wygląd mojej strony?

W prawie wszystkich przypadkach nie. Białe znaki wewnątrz elementów blokowych są zwijane i zamieniane na podziały wierszy, które przeglądarki ignorują. Tekst i elementy liniowe pozostają w tej samej linii, a pre, textarea, script i style nie są modyfikowane. Wyjątkiem są strony, które opierają się na CSS white-space: pre na zwykłych elementach.

Czy minifikuje CSS i JavaScript znajdujący się na stronie?

Nie. Zawartość script i style jest zachowywana dokładnie tak, jak została zapisana, więc nie może się zepsuć. Aby osobno zminifikować arkusz stylów, użyj formatera CSS.

Czy wklejanie HTML z nieznanego źródła jest bezpieczne?

Tak. Dane wejściowe są traktowane wyłącznie jako tekst i nigdy nie są wstawiane do strony, więc ich skrypty nie są uruchamiane, a obrazy ani linki nie są ładowane.

Czy waliduje mój HTML?

Nie. Celowo jest wyrozumiały i formatuje uszkodzony kod zamiast go odrzucać. Niepasujące znaczniki zamykające są zachowywane, więc wcięcia pomagają je zauważyć, ale nie jest tworzona lista błędów.

Prywatność

Twój HTML jest przetwarzany tylko w Twojej przeglądarce i nigdy nie jest renderowany ani przesyłany. Nic nie jest zapisywane ani uwzględniane w analityce.