Narzędzie do formatowania HTML — upiększaj i minimalizuj HTML online za darmo

Wklej dowolny kod HTML – nawet zminifikowany do jednego wiersza z procesu budowania – a narzędzie sformatuje go ponownie z właściwymi wcięciami, jednym tagiem na wiersz i spójnymi odstępami. Wybierz wcięcie 2, 4 lub 8 spacji. Wynik jest gotowy do wstawienia do edytora lub wklejenia w komentarzu do przeglądu kodu.

Upiększanie rozwija HTML dla czytelności: każdy znacznik w osobnym wierszu, zagnieżdżone elementy z wcięciem, puste wiersze zachowane między sekcjami. Minifikacja usuwa komentarze, redukuje ciągi białych znaków i usuwa podziały wierszy, dzięki czemu plik zajmuje mniej bajtów. Używaj upiększania do edycji i przeglądu, a minifikacji do wdrożenia produkcyjnego.

Nie — formater wykrywa bloki script i style oraz formatuje ich zawartość zgodnie z odpowiednimi regułami JS lub CSS, dzięki czemu skrypty osadzone pozostają poprawne, a arkusze stylów czytelne. Tagi samozamykające, elementy puste i atrybuty z przestrzenią nazw (svg:xmlns, xlink:href) są obsługiwane prawidłowo.

Narzędzie dobrze radzi sobie ze zwykłym HTML i szablonami przypominającymi HTML, ale czysty JSX (wyrażenia w nawiasach klamrowych, fragmenty, znaczniki komponentów pisane wielką literą) jest interpretowany jako HTML i może powodować drobne usterki kosmetyczne. W przypadku kodu specyficznego dla danego frameworka zalecamy Prettier skonfigurowany pod Twój dialekt; dla surowego HTML, plików .htm i szablonów nasze narzędzie sprawdza się idealnie.

Nie następuje żadne przesyłanie. Formater działa w całości w przeglądarce, więc możesz bezpiecznie wkleić wewnętrzne szablony stron, szkice wiadomości lub HTML z prywatnymi danymi, a nic nie opuści Twojego urządzenia.

Minifikacja usuwa komentarze HTML, zamienia każdy ciąg białych znaków między tagami na pojedynczą spację i usuwa podziały wierszy. Efektem jest kod HTML renderujący się identycznie co do bajta, ale zwykle o 10–30% mniejszy. W połączeniu z kompresją gzip na serwerze wyraźnie zmniejsza to początkową wagę stron z dużą ilością treści.

Tak — kliknij Pobierz, aby zapisać sformatowany wynik jako output.html lub zminifikowany wynik jako output.min.html. Plik jest zakodowany w UTF-8, więc równie dobrze obsługuje treści w języku angielskim, cyrylicy, pismach CJK oraz pisanych od prawej do lewej.

To niewielkie narzędzie działające wyłącznie w przeglądarce — bez kosztów hostingu — dlatego udostępniamy je za darmo jako część naszego zestawu narzędzi dla programistów. Bez reklam, bez śledzenia danych wyjściowych, bez limitów rozmiaru pliku poza tym, co Twoja przeglądarka pomieści w pamięci.

Tryb upiększania pozwala wybrać wcięcie 2, 4 lub 8 spacji. Wybierz szerokość używaną przez Twój edytor lub styl kodu, a następnie skopiuj wynik lub pobierz go jako output.html, aby formatowanie przeszło prosto do Twojego projektu.

Selektor wcięć (2, 4 lub 8 spacji) działa tylko w trybie Formatowania, ponieważ Minifikacja z założenia usuwa wszystkie białe znaki i podziały wierszy — nie ma już czego wcinać. Przełącz się z powrotem na Formatowanie, aby ponownie zobaczyć działanie szerokości wcięcia.

Podczas wklejania lub edycji narzędzie automatycznie przeprowadza kontrolę struktury i wypisuje wszelkie niezamknięte, niedopasowane lub osierocone znaczniki zamykające bezpośrednio pod panelem wyniku — bez potrzeby klikania osobnego przycisku. Zielony komunikat „Nie znaleziono problemów strukturalnych” potwierdza, że znaczniki są poprawnie sformatowane.

Użyj trybu Upiększanie z wcięciem 2 spacji — to najczęstsza konwencja, która utrzymuje różnice zwięzłymi — a następnie sprawdź panel problemów strukturalnych, aby potwierdzić, że nie pozostawiono niezamkniętego znacznika. Po sprawdzeniu przełącz się na tryb Minifikacja przed wdrożeniem na produkcję, aby ponownie usunąć zbędne białe znaki.

Tak — przeciągnij plik .html, .htm lub .xhtml na obszar przesyłania albo kliknij go, aby przeglądać, a jego zawartość zostanie wczytana bezpośrednio do pola wejściowego dokładnie tak, jakbyś ją wkleił. Od tego momentu Upiększ, Minifikuj, szerokość wcięcia i sprawdzanie struktury działają identycznie, niezależnie od tego, czy kod pochodzi z pliku, czy z wklejenia.

Tak — gdy pojawi się wynik, obok panelu wyniku i głównego obszaru akcji wyświetla się przycisk Kopiuj. Kliknięcie go natychmiast kopiuje do schowka bieżący wynik Upiększ lub Minifikuj (na chwilę pokazuje „Copied!” jako potwierdzenie), więc możesz wkleić go bezpośrednio do edytora lub komentarza w przeglądzie kodu bez zapisywania pośredniego pliku .html.

Nie — HTML Prettify działa całkowicie w przeglądarce, więc to, co wkleisz, nigdy nie opuści komputera, na którym się znajdujesz. Ma to znaczenie, jeśli sprawdzasz coś, co zawiera token, klucz lub dane klienta. Aby ją wyczyścić, wystarczy zamknąć zakładkę.

Błąd wskazuje na pierwszą pozycję, której nie można przeanalizować, co zwykle następuje tuż po prawdziwym błędzie, a nie na nim — brakujący przecinek, niezamknięty cudzysłów lub nawias albo inteligentny cytat wklejony z dokumentu zamiast prostego. Najpierw sprawdź linię nad zgłoszoną pozycją.

Nie dla obu. HTML Prettify jest darmowy, plik do pobrania nie zawiera znaku wodnego i na końcu nie jest o nic proszony — nie ma sensu, gdy skończysz pracę, a potem odkryjesz, że to kosztuje.

Nie — HTML Prettify działa w przeglądarce na komputerze stacjonarnym i telefonie. Nie trzeba nic instalować, nie trzeba rozpoczynać okresu próbnego ani kupować licencji, zanim zobaczysz, czy spełnia Twoje potrzeby. Wypróbuj na pliku, w którym faktycznie utknąłeś, a nie na próbce.