Podgląd HTML online (HTML Viewer)

Wklej kod lub otwórz plik .html: zobacz wynik w bezpiecznej ramce i znajdź niedomknięte znaczniki z numerem linii.

Bez konta

Bez instalacji

Bezpłatnie

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Wczytaj przykład

Otwórz plik .html albo przeciągnij go tutaj

Filtr bezpieczeństwa

Szerokość podglądu

Układ

Kod HTML 1,7 KB

Podgląd i sprawdzenie odświeżają się same po chwili od ostatniej zmiany. Limit: 1 MB.

Podgląd Odświeżam… Pełna szerokość

Sprawdzenie kodu HTML

Bez błędów składni Uwaga

Znaczniki są poprawnie zamknięte. Do sprawdzenia (dostępność, metadane): 1 uwaga, lista poniżej.

Znaczniki

7 rodzajów

Rozmiar kodu

1,7 KB

1 776 B, 1 753 znaki, 19 linii

Głębokość zagnieżdżenia

Najgłębszy poziom elementów

Linki / obrazy

1 / 0

Znaczniki <a> i <img>

Doctype

Brak (fragment kodu)

Fragment do wstawienia w stronę

Filtr bezpieczeństwa

Nic do usunięcia

Brak skryptów i atrybutów zdarzeń

Znalezione błędy i uwagi
Linia	Rodzaj	Opis
8	Uwaga	Pominięty poziom nagłówka: po <h1> od razu <h3>.

Jak działa podgląd i sprawdzanie kodu

Bezpieczna ramka podglądu

Kod jest wyświetlany w ramce <iframe sandbox> bez uprawnienia do uruchamiania skryptów, wysyłania formularzy i otwierania okien. Style CSS i obrazy działają normalnie. Filtr bezpieczeństwa dodatkowo usuwa <script>, atrybuty onclick i podobne, linki javascript: oraz meta refresh. Kod służy tylko do podglądu i nie jest zapisywany.

Co wykrywa sprawdzenie

Śledzimy otwarte znaczniki i podajemy numer linii dla: niedomkniętych elementów, zamknięć bez otwarcia, złej kolejności zamykania, powtórzonych atrybutów i identyfikatorów id. Lista pokazuje maksymalnie 100 pierwszych problemów. To szybka kontrola składni, a nie pełny walidator W3C.

Czego nie trzeba zamykać

Elementy puste (<br>, <img>, <input>, <meta>, <hr>, <link>) nie mają znacznika zamykającego. Zamknięcie jest też opcjonalne m.in. dla <p>, <li>, <td>, <tr> i <option>, więc ich brak nie jest błędem. Zapis <div /> nie zamyka elementu: ukośnik działa tylko w SVG.

Dostępność, SEO i e-maile

WCAG 2.1 wymaga tekstu alternatywnego dla obrazów, więc każdy <img> potrzebuje alt. Ustaw lang w <html> i nie pomijaj poziomów nagłówków. Szablony e-mail buduj na tabelach ze stylami inline: Outlook na Windows renderuje HTML silnikiem Worda i słabo obsługuje flexbox oraz grid.

Ściąga: semantyczne elementy HTML5

Do czego służą najważniejsze kontenery semantyczne, jaką rolę dostają w czytnikach ekranu i jakie błędy popełnia się najczęściej.

Element	Do czego służy	Domyślna rola ARIA	Typowy błąd
<main>	Główna, unikalna treść strony	main	Kilka widocznych <main> na jednej stronie
<header>	Wstęp strony lub artykułu: logo, tytuł, menu	banner (gdy nie jest w article/section)	Mylenie z <head> (metadane)
<nav>	Główne bloki nawigacji	navigation	Opakowywanie każdego pojedynczego linku
<article>	Treść zrozumiała samodzielnie: wpis, karta, komentarz	article	Używanie jako zamiennika <div>
<section>	Grupa treści o jednym temacie	region (gdy ma nazwę dostępną)	Sekcja bez nagłówka h2–h6
<aside>	Treść poboczna: ramka, panel boczny	complementary	Umieszczanie w nim głównej treści
<footer>	Stopka: autor, prawa autorskie, kontakt	contentinfo (gdy nie jest w article/section)	Wrzucanie do stopki setek linków
<figure>	Ilustracja, wykres lub kod z podpisem	figure	Brak <figcaption> z podpisem

Oceń to narzędzie:

5,0 / 5 · 1 ocena

Powiązane narzędzia

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

Podaj dalej

Komuś też się przyda?

Wyślij znajomemu link. Otworzy narzędzie od razu, bez konta i bez opłat.

Podgląd HTML online: render kodu i sprawdzenie znaczników

Wklejasz kod albo otwierasz plik .html, a podgląd HTML online pokazuje, jak przeglądarka wyrenderuje stronę. Pod podglądem widać wynik sprawdzenia składni: niedomknięte znaczniki, zamknięcia bez otwarcia, złą kolejność zamykania i powtórzone id, każdy problem z numerem linii. Podgląd odświeża się sam pół sekundy po ostatniej zmianie w edytorze.

Po co podgląd HTML, skoro plik można otworzyć w przeglądarce?

Plik otwarty bezpośrednio w przeglądarce wykonuje swoje skrypty, przekierowania meta refresh i zdarzenia onclick. Do tego przeglądarka po cichu naprawia błędy w znacznikach, więc strona wygląda poprawnie, choć kod jest zepsuty i rozjedzie się po wklejeniu do CMS-a albo szablonu maila.

Tutaj kod trafia do ramki bez prawa uruchamiania skryptów, a obok dostajesz listę problemów, których przeglądarka nie zgłasza. Przydaje się przy fragmentach od klienta, szablonach newsletterów, kodzie wygenerowanym przez kreator stron i przy szukaniu sekcji, która psuje układ.

Co robi narzędzie

Wczytanie kodu

Kod możesz wkleić do edytora albo otworzyć plik .html, .htm, .xhtml lub .txt przyciskiem lub przeciągając go na pole pliku. Limit to 1 MB (1 048 576 bajtów); większy plik zostanie odrzucony z komunikatem. Na start masz 5 gotowych przykładów: landing page, newsletter e-mail, formularz rejestracji, kartę KPI i artykuł.

Układy i szerokości

Do wyboru są cztery układy: Kod + podgląd, Tylko podgląd, Tylko kod oraz Struktura. Ramkę podglądu ustawisz na pełną szerokość albo na 390 px (telefon), 768 px (tablet) i 1280 px (laptop). Gdy ramka jest szersza niż ekran, przewija się poziomo, więc układ nie jest ściskany.

Wynik i kafelki

Nad listą problemów widać liczbę błędów i uwag, a kafelki pokazują: liczbę znaczników i ich rodzajów, rozmiar kodu (bajty, znaki, linie), głębokość zagnieżdżenia, liczbę linków i obrazów, rodzaj doctype (HTML5, starszy standard albo brak, czyli fragment) oraz to, co usunął filtr bezpieczeństwa.

Widok Struktura

Konspekt nagłówków h1–h6 z wcięciem według poziomu i numerem linii pokazuje, czy hierarchia ma sens. Tabela znaczników podaje dla każdego tagu liczbę wystąpień, rolę, domyślną rolę ARIA i wskazówkę; filtr zawęża ją np. do a albo h2.

Gotowy kod skopiujesz do schowka albo pobierzesz jako plik strona.html. Przycisk „Wyczyść edytor” usuwa całą treść.

Bezpieczny podgląd HTML: ramka sandbox i filtr

Podgląd jest wyświetlany w <iframe sandbox> bez uprawnienia allow-scripts. JavaScript nie uruchomi się w nim nawet po wyłączeniu filtra, formularze nie zostaną wysłane, a kod nie otworzy nowych okien. Ramka ma też referrerpolicy="no-referrer", więc zewnętrzne serwery nie dostają adresu strony.

Filtr bezpieczeństwa jest domyślnie włączony i przed renderem zmienia kod tak:

Co znajduje w kodzie	Co robi
`<script>…</script>`	zastępuje komentarzem HTML „skrypt usunięty”
atrybuty zdarzeń: `onclick`, `onload`, `onerror` i inne `on…`	zamienia na pusty `data-usuniete-zdarzenie`
`href`, `src`, `action`, `formaction`, `xlink:href` z adresem `javascript:`	podmienia adres na `#`
`<meta http-equiv="refresh">`	usuwa, żeby podgląd nie przekierował

Kafelek „Filtr bezpieczeństwa” mówi, ile elementów zmieniono. Dla kodu <a href="javascript:alert(1)" onclick="x()">a</a><script>alert(2)</script> pokaże „Usunięto 3” z opisem „1 skrypt, 1 atrybut on…, 1 link javascript:”.

Ważne: style CSS i obrazy działają w podglądzie normalnie, więc zewnętrzne obrazki, fonty i arkusze z CDN są pobierane, także piksel śledzący w mailu. Filtr opiera się na wzorcach tekstowych i nie zastępuje pełnej sanityzacji; główną ochronę daje sandbox. Do analizy kod trafia na serwer, ale nie jest zapisywany. Nie wklejaj kodu z hasłami ani kluczami API.

Sprawdzanie kodu HTML: co wykrywa

Narzędzie przechodzi przez kod znacznik po znaczniku i śledzi, co jest otwarte. Problemy dzieli na błędy (zepsuta struktura) i uwagi (dostępność, metadane, styl zapisu):

Problem	Rodzaj	Przykład
znacznik niezamknięty do końca kodu	błąd	`<span>Koniec` bez `</span>`
zła kolejność zamykania	błąd	`<b><i>tekst</b></i>`
zamknięcie bez otwarcia	błąd	nadmiarowy `</div>`
powtórzony atrybut lub ten sam `id` kilka razy	błąd	`class` dwa razy w jednym znaczniku
niezamknięty komentarz, `<script>`, `<style>`, `<textarea>` lub `<title>`	błąd	cała dalsza część kodu staje się ich treścią
obraz bez `alt`, pominięty poziom nagłówka, kilka `<h1>`	uwaga	`<h2>`, a po nim od razu `<h4>`
ukośnik w elemencie, który nie jest pusty	uwaga	`<div />` nie zamyka elementu
pełny dokument bez doctype, `lang`, `meta charset`, `viewport` lub `<title>`	uwaga	`<html>` bez `lang="pl"`

Brak </p>, </li>, </td>, </tr> czy </option> nie jest zgłaszany, bo specyfikacja HTML pozwala je pominąć. Lista pokazuje do 100 pierwszych problemów. To szybka kontrola składni, a nie pełny walidator W3C: nie sprawdza na przykład, czy dany element wolno umieścić w innym.

Przykład krok po kroku

Weźmy 6 linii kodu:

<div class="karta">
<h2>Oferta</h2>
<p>Cena: 99 zł
<img src="foto.jpg">
</div>
<span>Koniec

Wynik to 1 błąd i 1 uwaga. Błąd w linii 6: <span> nie został zamknięty do końca kodu. Uwaga w linii 4: obraz bez atrybutu alt. Niezamknięty <p> z linii 3 nie jest błędem, bo </div> zamyka go niejawnie. Kafelki pokażą 5 znaczników (5 rodzajów), głębokość zagnieżdżenia 3 (div → p → img), 0 linków i 1 obraz oraz doctype „Brak (fragment kodu)”.

Do czego służy podgląd HTML online

Landing z kreatora: sprawdzasz, czy sekcje układają się poprawnie na 390 px i czy hierarchia nagłówków w konspekcie ma sens.
Newsletter: oglądasz układ maila i szukasz niedomkniętych komórek tabeli. Podgląd pokazuje silnik Twojej przeglądarki, nie Outlooka, który renderuje HTML silnikiem Worda i słabo obsługuje flexbox i grid, dlatego maile buduje się na tabelach ze stylami inline.
Fragment od kogoś z zespołu: wklejasz, poprawiasz w edytorze, kopiujesz albo pobierasz gotowy plik.
Debugowanie układu: lista problemów z numerami linii wskazuje zduplikowane id albo brakujący znacznik zamykający, przez który połowa strony ląduje w złym kontenerze.

Jak bezpiecznie obejrzeć nieznany HTML

Wklej kod albo otwórz plik i zostaw filtr bezpieczeństwa włączony.
Sprawdź kafelek filtra: ile skryptów, atrybutów on…, linków javascript: i przekierowań usunięto.
Przejdź do widoku Struktura i wpisz w filtr script, iframe albo form. Tabela liczy znaczniki w oryginalnym kodzie, więc pokaże też skrypty, które filtr wyciął z podglądu.
Jeśli nie chcesz, żeby podgląd pobierał zewnętrzne obrazy, usuń adresy z src przed wklejeniem.

FAQ: podgląd HTML online

Czy kod HTML jest wysyłany na serwer?

Tak, kod trafia na serwer, który go analizuje i przygotowuje podgląd, ale nie jest zapisywany. Nie wklejaj kodu zawierającego hasła, tokeny ani klucze API.

Dlaczego w podglądzie nie działa JavaScript?

Ramka podglądu ma atrybut sandbox bez allow-scripts, więc przeglądarka nie wykona żadnego skryptu, także po wyłączeniu filtra. Działają HTML i CSS.

Jak otworzyć plik HTML online?

Kliknij „Otwórz plik .html” albo przeciągnij plik na pole obok przycisku. Obsługiwane są pliki .html, .htm, .xhtml i .txt do 1 MB; treść od razu trafia do edytora.

Jak sprawdzić, jak strona wygląda na telefonie?

Ustaw szerokość podglądu na „Telefon (390 px)” albo „Tablet (768 px)”. Ramka ma wtedy dokładnie tę szerokość, więc media queries z kodu zadziałają jak na urządzeniu.

Czy to walidator HTML W3C?

Nie. Narzędzie sprawdza zamykanie i zagnieżdżanie znaczników, powtórzone atrybuty i id oraz podstawowe metadane. Pełną zgodność ze specyfikacją sprawdzisz w walidatorze W3C.