Wklej uszkodzony HTML i kliknij „Napraw HTML!!", żeby go poskładaćWpisz nieprawidłowy HTML

Czym jest Naprawa HTML?

Masz HTML w zasadzie poprawny, ale rozwala stronę? Niedomknięty <p>, zabłąkany </div> albo href bez cudzysłowów potrafią wepchnąć resztę dokumentu w dziwny stan parsowania. Przeglądarka jakoś sobie radzi z popsutym znacznikiem — ale efekt rzadko jest tym, czego chciałeś. Wklej go tutaj, a oddamy ci coś, z czym parser nie ma problemu, zgodnie z regułami HTML Living Standard od WHATWG.

Celujemy w codzienne wpadki: brakujący tag zamykający, nieuciekiniony cudzysłów, wartość atrybutu bez ", niedomknięty element listy, blokowy element zagnieżdżony tam, gdzie nie powinien być. Tego typu rzeczy zgłasza po jednej naraz oficjalny walidator W3C. Naprawiacz czyta cały dokument za jednym razem i oddaje ci czystą wersję, którą możesz wkleić wprost z powrotem do projektu.

Twój znacznik trafia do usługi naprawczej przez HTTPS i nie jest u nas przechowywany. Jeśli masz w środku sekrety — klucze API zaszyte w <code><script></code> czy atrybutach <code>data-*</code> — usuń je przed wklejeniem.

Jak korzystać z Naprawy HTML

Trzy kroki. Działa na fragmentach, pełnych dokumentach albo na czymkolwiek dziwnym, co dostałeś z eksportu CMS-a.

Wklej uszkodzony HTML lub załaduj próbkę

Wrzuć HTML do edytora po lewej. Kliknij Przykładowy HTML, żeby załadować małą stronę potwierdzenia zamówienia z typowymi błędami — niedomkniętym <head>, elementem listy bez </li>, niezacudzysłowanym href. Przykład uszkodzonego HTML:

<p>Your order <strong>SKU-101 ships tomorrow.
<ul>
  <li>1 x Laptop Stand
  <li>2 x USB-C Cable</li>
</ul>

Trzy błędy: <strong> nigdy się nie zamyka, pierwsze <li> nie jest zakończone, brakuje </p>. Naprawiacz domyka je w odpowiedniej kolejności.

Kliknij Napraw HTML!!

Wciśnij zielony przycisk Napraw HTML!!. Wysyłamy znacznik do usługi naprawczej, która domyka otwarte elementy zgodnie z regułami składni HTML, przywraca cudzysłowy w atrybutach i poprawia zagnieżdżenie tam, gdzie ewidentnie jest źle. Treść tekstowa, klasy, identyfikatory i style inline zostają nietknięte.

Sprawdź naprawiony wynik

W prawym panelu masz naprawiony HTML. Wrzuć go do przeglądarki, do naszego walidatora HTML dla pewności albo z powrotem do CMS-a. Pełniejszy audyt dostępności zrób dedykowanym narzędziem a11y — to oddzielna sprawa od naprawy składni.

Kiedy faktycznie się to przyda

Naprawa wyjścia z CMS-a lub szablonów e-mail

Edytory WYSIWYG i kreatory szablonów mailowych uwielbiają produkować subtelnie popsuty znacznik — osierocone <p>, brakujące atrybuty alt, czasem niedomknięty <td>. Przepuść eksport tutaj raz przed publikacją, żeby renderowana strona nie skakała nieprzewidywalnie między przeglądarkami.

Ratowanie znacznika wklejonego z aplikacji biurowych

Word i Dokumenty Google wklejają plątaninę <span>-ów i własnych atrybutów, często z niezbalansowanymi tagami albo zabłąkanymi  . Naprawiacz czyści strukturę, więc możesz dalej edytować efekt zamiast pisać go od zera.

Naprawa ręcznie pisanych komponentów

Szybkie i brudne wycinki HTML z tutoriala, wiki albo starego README — wklej, dostań czyste, włóż tam, gdzie miało trafić. Przydatne, kiedy się odblokowujesz po skopiowaniu przykładu, który u kogoś na blogu działał, a u ciebie nie.

Sanityzacja zescrapowanych stron przed parsowaniem

Kiedy scrapujesz HTML do ekstraktora, popsuty znacznik wybija parsery oparte na DOM. Przepuść strony najpierw tutaj, żeby parser dostał stabilną strukturę. Sparuj z prawdziwym walidatorem, jeśli potrzebujesz ścisłej zgodności.

Częste pytania

Czy mój HTML jest gdzieś zapisywany albo udostępniany?

HTML, który wklejasz, leci na nasz backend przez HTTPS, żeby zrobić naprawę, i nie zostawiamy go u siebie po odesłaniu odpowiedzi. W ścieżce żądania nie ma trackerów stron trzecich. Mimo to: jeśli twoja strona ma zaszyte klucze API, wewnętrzne URL-e albo tokeny analityczne, traktuj ją jak każde inne publiczne wklejenie i wyczyść wrażliwe wartości najpierw.

Jakiego rodzaju błędy HTML to faktycznie naprawia?

Niedomknięte tagi (<p>, <li>, <td>, <span>), niedopasowane zamknięcia, brakujące lub niezbalansowane cudzysłowy w atrybutach, zniekształcony DOCTYPE, zabłąkane &/</> w treści tekstowej, które powinny być encjami, oraz oczywiste pomyłki w zagnieżdżeniu (element blokowy w środku elementu inline). Nie wymyśla brakującej treści ani nie przepisuje poprawnego znacznika.

Czy zmieni moje klasy, identyfikatory albo style inline?

Nie. Naprawiacz ma jasne polecenie: poprawiać tylko składnię — nazwy klas, identyfikatory, atrybuty style inline, atrybuty data-* i obsługa zdarzeń typu onclick przechodzą bez zmian. Jeśli kiedykolwiek wynik wygląda, jakby coś z tego ruszył, to bug.

Czy generuje HTML5, XHTML, czy oba?

Celuje w HTML5 — tym parsuje każda dzisiejsza przeglądarka. Samozamykające tagi na elementach typu void jak <br /> są akceptowane na wejściu, ale wyjście używa standardowej formy HTML5. Jeśli koniecznie potrzebujesz ścisłego XHTML-a (dziś rzadkość), użyj narzędzia świadomego XHTML.

Czemu po prostu nie przepuścić HTML-a przez walidator W3C?

Powinieneś, na ostatnie sito — walidator W3C jest źródłem prawdy o tym, co liczy się jako poprawny HTML. Tyle że pokazuje błędy po jednym i ich nie naprawia. Naprawiacz służy do tego, żeby najpierw zamknąć dokument w jednym przebiegu; potem odpalasz walidator dla potwierdzenia.

A dostępność — czy dorzuca brakujący alt albo ARIA?

Nie i robi tak celowo. Role ARIA i tekst alt to decyzje dotyczące treści, nie składni. Wstawienie zastępczego alt="" zamaskowałoby prawdziwy problem z dostępnością. Do tego odpal dedykowany audyt a11y (axe, WAVE, Lighthouse).

Inne narzędzia HTML, które mogą się przydać

Naprawa składni to dopiero początek. Kiedy już parsuje, te narzędzia są sensownym kolejnym krokiem: