Formatowanie i minifikacja HTML – formatuj 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 — js-beautify (silnik działający pod maską) 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 się, elementy puste oraz 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 dochodzi do żadnego przesyłania. Formatowanie odbywa się w całości w Twojej przeglądarce za pomocą js-beautify, więc możesz bezpiecznie wklejać wewnętrzne szablony stron, szkice maili lub kod HTML zawierający prywatne dane, a nic nie opuszcza 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.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

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.

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.