Przejdź do treści
Bezpłatne narzędzie

Formatter HTML online: upiększ kod HTML i CSS

Formatter HTML, zwany też HTML Beautifier, zamienia zminifikowany lub nieuporządkowany kod HTML i CSS w czytelny kod z wcięciami: jednolinijkowy zapis body{margin:0;font-family:Arial,sans-serif}… staje się np. przejrzyście wciętymi regułami CSS. Możesz wybrać 2 lub 4 spacje albo tabulator. Język jest wykrywany automatycznie. Za darmo, bez rejestracji — twój kod pozostaje w przeglądarce.

Autor: Luca Stanek

Kod gotowy? Uruchom swoją stronę dzięki szybkiemu i niezawodnemu hostingowi WWW.

Opublikuj swoją stronę

Sformatowany kod

Sformatowany kod pojawi się tutaj, gdy wkleisz coś po lewej stronie.

Wklej swój kod po lewej lub wczytaj przykład. Wynik pojawi się od razu.

Twój kod pozostaje w twojej przeglądarce: nie jest przesyłany ani zapisywany.

Przykładowy wynik

Co formater HTML i CSS robi z twoim kodem

Kod w postaci wygenerowanej przez minifier lub edytor oraz wynik z wcięciem o szerokości 2 spacji.

HTML

Dane wejściowe:

<nav class="navbar"><ul><li><a href="/">Start</a></li><li class="active"><a href="/tools">Tools</a></li></ul></nav><main><h1>Willkommen</h1><p>Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>, der sich nicht um   Leerzeichen schert.</p><img src="logo.png" alt="Logo"></main>

Wynik:

<nav class="navbar">
  <ul>
    <li><a href="/">Start</a></li>
    <li class="active"><a href="/tools">Tools</a></li>
  </ul>
</nav>
<main>
  <h1>Willkommen</h1>
  <p>
    Ein <strong>kurzer</strong> Absatz mit einem <a href="https://example.com/ein/langer/link">Link</a>,
    der sich nicht um Leerzeichen schert.
  </p>
  <img src="logo.png" alt="Logo">
</main>

CSS

Dane wejściowe:

body{margin:0;font-family:Arial,sans-serif}.btn,.link{color:#fff;background:#0a84ff;padding:8px 16px}.btn:hover{opacity:.8}@media (max-width:600px){.btn{display:block}}

Wynik:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.btn,
.link {
  color: #fff;
  background: #0a84ff;
  padding: 8px 16px;
}

.btn:hover {
  opacity: .8;
}

@media (max-width: 600px) {
  .btn {
    display: block;
  }
}

Przegląd

Czym jest HTML Formatter?

HTML Formatter, zwany także HTML Beautifierem, układa kod HTML i CSS w czytelnej postaci: jedna struktura w wierszu i jednolite wcięcia. Automatycznie rozpoznaje język, stosuje wcięcia o szerokości 2 lub 4 spacji albo tabulatora i otwiera pliki do 2 MB. Poza ewentualnym brakującym średnikiem na końcu kodu CSS zmienia tylko spacje i podziały wierszy. Działa bezpłatnie w twojej przeglądarce, bez przesyłania plików.

Formatuj HTML

Elementy blokowe są umieszczane w osobnych wierszach i mają wcięcia, a tekst jest zawijany po 100 znakach. Długie tagi mogą na życzenie mieć jeden atrybut w każdym wierszu.

Formatuj i upiększaj CSS

Selektory, deklaracje i nawiasy klamrowe znajdują się w osobnych wierszach, także wewnątrz @media. Długie listy wartości, takie jak transition, są dzielone na kilka wierszy.

Język wykryty automatycznie

Tagi wskazują na HTML, a nawiasy klamrowe, reguły @ lub właściwości z dwukropkiem — na CSS. Możesz też ręcznie wybrać HTML lub CSS.

Ostrzeżenia z numerem wiersza i kolumny

Narzędzie zgłasza niezamknięte tagi i nawiasy, podając wiersz i kolumnę. Kliknięcie zaznacza dane miejsce we wprowadzonym tekście. Nie jest to walidator.

Wynik z podświetleniem składni

Zobaczysz też liczbę wierszy oraz elementów albo reguł i deklaracji. Wyniki dłuższe niż 150.000 znaków są wyświetlane bez kolorów.

W przeglądarce, bez przesyłania plików

Twój kod nie jest przesyłany ani zapisywany. Możesz otwierać pliki do 2 MB oraz kopiować lub pobierać wynik.

Jak to działa

Jak formatować HTML i CSS online

Pięć kroków, bez logowania i instalacji.

Krok 1

Wklej kod

Wklej HTML lub CSS w polu po lewej, otwórz plik (.html, .htm, .xhtml, .css lub .txt, do 2 MB) albo załaduj przykładowy HTML lub CSS.

Krok 2

Sprawdź język

Pozostaw język ustawiony na „Automatycznie” albo wybierz HTML lub CSS. Wykryty język znajdziesz pod wynikiem.

Krok 3

Wybierz wcięcie

Ustaw wcięcia na 2 spacje, 4 spacje lub tabulator. W przypadku HTML zdecyduj, czy atrybuty długich tagów mają być przenoszone do kolejnych wierszy, czy pozostać w jednym.

Krok 4

Sprawdź wskazówki

Ostrzeżenia i błędy wskazują wiersz i kolumnę. Kliknięcie linku obok zaznaczy to miejsce w twoich danych wejściowych.

Krok 5

Zastosuj wynik

Skopiuj sformatowany kod lub pobierz go jako formatted.html albo formatted.css.

Reguły

Jak działa formater HTML i CSS

Elementy bloku

div, ul, table i podobne elementy są w osobnych wierszach, a ich zawartość ma wcięcia. Krótkie elementy, np. akapit, pozostają w jednym wierszu.

Tekst ciągły

Wielokrotne spacje zostają zastąpione pojedynczą, a długie akapity są dzielone po 100 znakach. Spacja między tagami inline zostaje zachowana.

Długie tagi

Jeśli tag nie mieści się w jednym wierszu, każdy atrybut trafia do osobnego wiersza. Możesz to wyłączyć.

Bez zmian

Zawartość pre i textarea, komentarze, wartości atrybutów i teksty pozostają bez zmian. style jest formatowany jako CSS, a script może mieć co najwyżej zmienione wcięcia.

CSS: selektory, deklaracje i nawiasy klamrowe są w osobnych wierszach, a brakujący średnik na końcu zostaje dodany. Ograniczenia: kod nie jest walidowany, JavaScript nie jest formatowany, a SCSS i Less nie są obsługiwane.

Odkryj więcej

Więcej narzędzi

Porównywanie tekstów online (Diff Checker)

Porównywanie tekstów online: Porównaj dwa teksty, konfiguracje lub wersje kodu, zobacz różnice w poszczególnych wierszach i słowach oraz skopiuj wynik jako Unified Diff. Wszystko działa w przeglądarce.

Autor: Dimitri Heissler

Formatowanie JSON

Formatuj, minimalizuj i sprawdzaj poprawność JSON – z podświetlaniem składni, komunikatami o błędach i możliwością pobrania, w całości w przeglądarce.

Autor: Jakub Martyniak

Formater i walidator XML

Sprawdzaj poprawność, formatuj, minimalizuj i automatycznie naprawiaj XML (niezamaskowane znaki, brakujące tagi i deklaracje) — w 100% w przeglądarce, bez przesyłania plików.

Autor: Justin Schuessler

Tester Regex

Testuj wyrażenia regularne na żywo w natywnym silniku JavaScript — z podświetlaniem dopasowań, grupami przechwytującymi i trybem zamiany, w całości w przeglądarce.

Autor: Jakub Martyniak

Koder i dekoder URL

Kodowanie i dekodowanie adresów URL oraz tekstu online: porównanie encodeURIComponent, encodeURI i formatu formularza, tabela parametrów zapytania oraz kreator linków UTM. Działa w całości w przeglądarce.

Autor: Dimitri Heissler

Generator .htaccess i generator htpasswd

Tworzenie plików Apache .htaccess i .htpasswd online: przekierowania 301, HTTPS, ochrona hasłem z bcrypt, reguły WordPress, strony błędów, buforowanie, GZIP i ochrona przed hotlinkowaniem. Działa w całości w przeglądarce.

Autor: Dimitri Heissler

Edytor Markdown

Pisz w Markdown online z podglądem na żywo: pliki README na GitHub, wiadomości na Discordzie, tabele z Excela oraz eksport do PDF lub HTML. Wszystko w przeglądarce.

Autor: Dimitri Heissler

Formatowanie SQL online (formatuj i upiększaj SQL)

Formatuj, upiększaj i minimalizuj SQL online – dla MySQL, MariaDB i PostgreSQL, z ustawieniami wcięć i pisowni słów kluczowych. Działa w całości w przeglądarce, bez przesyłania danych.

Autor: Luca Stanek

Wybór koloru

Przeliczaj kolory na bieżąco między HEX, RGB, HSL, HSV i CMYK, znajdź najbliższy nazwany kolor CSS i sprawdź kontrast WCAG względem czerni i bieli — wszystko w przeglądarce.

Autor: Justin Schuessler

FAQ

Często zadawane pytania

Krótkie odpowiedzi na pytania o formatowanie HTML i CSS za pomocą tego narzędzia.

HTML Formatter, zwany także Beautifierem, układa kod w czytelnej postaci: jedna struktura w wierszu i jednolite wcięcia. Przydaje się do kodu zminimalizowanego, kodu źródłowego z przeglądarki lub kodu z edytora bez funkcji formatowania. Formatuje HTML i CSS.

Wklej kod po lewej, a wynik od razu pojawi się po prawej. Wybierz wcięcia z 2 spacjami, 4 spacjami lub tabulatorem i określ, czy atrybuty długich tagów mają być przenoszone do nowych wierszy. Następnie skopiuj wynik lub pobierz go jako formatted.html.

Wklej kod CSS: narzędzie rozpozna go po nawiasach klamrowych, regułach @ lub właściwościach z dwukropkiem. Możesz też ręcznie wybrać CSS. Każda reguła otrzyma osobne wiersze dla selektora, deklaracji i nawiasów, również wewnątrz @media. Długie listy wartości, np. transition, zostaną podzielone na kilka wierszy, a brakujący średnik na końcu zostanie dodany. Pobrany plik będzie miał nazwę formatted.css.

Nie. Zmieniają się tylko spacje i podziały wierszy. Tagi, atrybuty, wartości, tekst i komentarze pozostają bez zmian. Jedyny wyjątek: w CSS dodawany jest brakujący średnik po ostatniej deklaracji.

Formatter zmienia w kodzie źródłowym tylko spacje, wcięcia i podziały wierszy, aby kod był czytelniejszy. Tekst w HTML formatujesz za pomocą tagów, takich jak strong, em czy br. Narzędzie ich nie dodaje ani nie zmienia.

Zawartość pre i textarea pozostaje bez zmian, ponieważ liczy się tam każda spacja. CSS w style jest formatowany, a script może mieć co najwyżej zmienione wcięcia, bez zmiany formatowania kodu.

Nie, nie waliduje ani nie minifikuje kodu. Formatuje tylko HTML i CSS: nie formatuje ponownie JavaScriptu wewnątrz script i nie obsługuje SCSS ani Less. Ostrzega jednak o niezamkniętych tagach, tagach zamykających bez otwierających oraz niedopasowanych nawiasach klamrowych, wskazując wiersz i kolumnę. Jeśli komentarz, tekst w cudzysłowie lub tag nie został zakończony, zamiast wyniku pojawi się komunikat o błędzie.

Nie. Wszystko działa w twojej przeglądarce, bez przesyłania i zapisywania danych. Możesz otwierać pliki do 2 MB: .html, .htm, .xhtml, .css lub .txt.

Masz dodatkowe pytania?

Kontakt z pomocą techniczną
Tworzysz właśnie stronę internetową?

Twoja strona potrzebuje niezawodnego hostingu

VPS od ZAP-Hosting zapewni Twojej stronie niezawodne działanie online.

4,4/5 Trustpilot32.000+ Aktywne serweryOd 2010 roku
Zobacz hosting

Bez konfiguracji. Bez ryzyka. Online w kilka sekund.

Elastyczny okres obowiązywaniaAnuluj w dowolnym momencieOnline w 60 sekund

Szukasz więcej narzędzi? Zobacz wszystkie narzędzia dla programistów