Softonic

Formatowanie HTML

Krok 1 / 3

Wklej kod HTML o długości do 100 000 znaków. Kod nie zostanie uruchomiony.

Dalej: wybierz wcięcie

Wklej HTML, wybierz wcięcie o szerokości dwóch lub czterech spacji i sprawdź czytelniejszą kopię. Narzędzie dodaje wcięcia tylko wtedy, gdy struktura jest jasna. Zachowuje tekst wokół elementów liniowych, atrybuty i zawartość wrażliwych bloków. Jeśli struktura jest niejasna, wpisany kod pozostaje bez zmian, a narzędzie wyświetla ostrzeżenie bez sformatowanego wyniku.

Formatuj HTML w trzech krokach

  1. 1

    Wklej HTML

    Wprowadź kod, który chcesz uporządkować. Możesz wkleić fragment lub cały dokument.

  2. 2

    Wybierz wcięcie

    Wybierz dwie lub cztery spacje dla zagnieżdżonych bloków. Zmienia to układ wyniku, a nie znaczniki czy atrybuty HTML.

  3. 3

    Sprawdź i wykorzystaj wynik

    Porównaj wynik z kodem źródłowym, a następnie skopiuj go lub pobierz, jeśli odpowiada potrzebom projektu. Jeśli pojawi się ostrzeżenie, sformatowany wynik nie będzie dostępny.

Co się zmienia, a co pozostaje bez zmian

Narzędzie dodaje wcięcia do bloków o jasnej strukturze, nie rozdzielając zdania znacznikami na osobne wiersze. Na przykład ten zwarty fragment:

<main><section><h2>Aktualności</h2><p>Przeczytaj <a href="/news">najnowsze wiadomości</a>.</p></section></main>

może zostać zapisany tak:

<main>
  <section>
    <h2>Aktualności</h2>
    <p>Przeczytaj <a href="/news">najnowsze wiadomości</a>.</p>
  </section>
</main>

Słowa wokół odnośnika i wartość atrybutu href pozostają bez zmian. Wybierz cztery spacje, jeśli taki styl obowiązuje w Twoim projekcie. Narzędzie nie sortuje atrybutów, nie zmienia rodzaju cudzysłowów, nie przepisuje encji, nie minifikuje kodu ani nie naprawia HTML.

Białe znaki między elementami mogą mieć znaczenie dla CSS, skryptów i szablonów. Dodanie wcięć do bloków o jasnej strukturze może wstawić nowe wiersze i spacje między znacznikami. Sprawdź wynik przed użyciem w dokumencie wrażliwym na białe znaki. Zawartość elementów <pre>, <code>, <textarea>, <script> i <style> pozostaje w podanej postaci.

Jeśli nie można bezpiecznie ustalić struktury, na przykład z powodu niepoprawnej składni lub pominiętych znaczników zamykających, wpisany kod pozostaje bez zmian i pojawia się ostrzeżenie. Sformatowany wynik nie powstaje. Ostrzeżenie wskazuje ograniczenie formatowania, a nie rozstrzyga o poprawności HTML. Do sprawdzenia zgodności ze standardem użyj walidatora HTML.

Najczęściej zadawane pytania

Nie. Zmienia jedynie wcięcia, gdy struktura jest jasna. Nie wykrywa wszystkich błędów HTML ani nie dodaje brakujących znaczników. Ostrzeżenie oznacza, że nie może sformatować kodu z wystarczającą pewnością.

Narzędzie zachowuje tekst i spacje wokół elementów liniowych. Może dodać białe znaki między blokami o jasnej strukturze, dlatego przed użyciem w szablonie wrażliwym na białe znaki porównaj wynik z oryginałem.

Pełne bloki pre, code, textarea, script i style pozostają w podanej postaci. Narzędzie nie formatuje ponownie ich zawartości.

Formatowanie odbywa się w przeglądarce. W widoku wieloetapowym wpisany kod jest przechowywany w pamięci sesji tej karty, aby można było przechodzić między krokami.

Jeśli pominięty znacznik zamykający uniemożliwia pewne ustalenie wcięć, wpisany kod pozostaje bez zmian, a narzędzie wyświetla ostrzeżenie bez sformatowanego wyniku. Dodaj jawne znaczniki zamykające, aby uzyskać przewidywalny układ.

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Walidator OpenAPI

Wklej dokument OpenAPI lub Swagger w JSON albo YAML i sprawdź jego podstawową strukturę: pole wersji, obiekt info i paths, z czytelnymi błędami i ostrzeżeniami.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Narzędzie jest dostępne w innych językach