Koder HTML

Zamień < > & " ' i polskie litery na encje HTML albo zdekoduj je z powrotem. Lokalnie w przeglądarce, wynik na żywo.

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";

                                                }

Ściąga: encje używane w tym koderze

Znaki, ich encje i kiedy powstają
Znak	Zapis w wyniku	Zapis numeryczny	Uwagi
&	&	&	Kodowany zawsze i w jednym przebiegu; od niego zaczyna się każda encja.
<	<	<	Początek znacznika: po zakodowaniu przeglądarka pokaże tekst zamiast wykonać znacznik.
>	>	>	Koniec znacznika, kodowany razem z „<”.
"	"	"	Cudzysłów: bezpieczny także w wartościach atrybutów.
'	'	'	Apostrof zapisywany numerycznie, bo ten zapis działa w każdej wersji HTML.
spacja			Twarda spacja, tylko z opcją „Spacje →  ”; zachowuje wcięcia i wielokrotne odstępy.
ą Ą	&aogon; &Aogon;	ą Ą	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ć Ć	&cacute; &Cacute;	ć Ć	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ę Ę	&eogon; &Eogon;	ę Ę	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ł Ł	&lstrok; &Lstrok;	ł Ł	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ń Ń	&nacute; &Nacute;	ń Ń	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ó Ó	ó Ó	ó Ó	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ś Ś	&sacute; &Sacute;	ś Ś	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ź Ź	&zacute; &Zacute;	ź Ź	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
ż Ż	&zdot; &Zdot;	ż Ż	Polska litera: nazwana encja z opcją „nazwane encje”, numeryczna z opcją „znaki spoza ASCII”.
©	©	©	Znak praw autorskich, z opcją „nazwane encje”.
®	®	®	Znak towarowy zastrzeżony, z opcją „nazwane encje”.
™	™	™	Znak towarowy, z opcją „nazwane encje”.
€	€	€	Euro, z opcją „nazwane encje”.
–	–	–	Półpauza, z opcją „nazwane encje”.
—	—	—	Pauza, z opcją „nazwane encje”.
…	…	…	Wielokropek, z opcją „nazwane encje”.
„	&bdquo;	„	Cudzysłów dolny, z opcją „nazwane encje”.
”	”	”	Cudzysłów górny zamykający, z opcją „nazwane encje”.
«	«	«	Cudzysłów francuski lewy, z opcją „nazwane encje”.
»	»	»	Cudzysłów francuski prawy, z opcją „nazwane encje”.
°	°	°	Stopień, z opcją „nazwane encje”.
×	×	×	Znak mnożenia, z opcją „nazwane encje”.

Do bezpiecznego wstawienia tekstu w treść HTML wystarczy pięć pierwszych znaków z tabeli. Polskie litery i symbole można w dokumentach UTF-8 zostawić bez kodowania. Tabela pokazuje teksty encji, a nie same znaki, więc nic się tu nie wykonuje.

Jak to liczymy

Tekst jest czytany raz, znak po znaku. Znaki & < > " ' zamieniają się na encje, reszta zostaje bez zmian, więc ampersand nie zamienia się podwójnie. Przykład: 5 & 10% <b> daje 5 & 10% <b>.

Encje a XSS

Kodowanie chroni tekst wstawiany między znaczniki oraz wartości atrybutów w cudzysłowie. Nie wystarczy wewnątrz <script>, <style>, adresów (href, src) ani atrybutów bez cudzysłowu. Tam potrzebne jest inne kodowanie lub walidacja. Nowoczesne szablony zwykle kodują same.

Pokazywanie kodu na stronie

Fragment HTML wklejony do artykułu lub forum musi być zakodowany. Inaczej przeglądarka go wykona zamiast wyświetlić. Zakoduj kod tutaj, wklej wynik do treści, a czytelnik zobaczy znaczniki. Oryginał odzyskasz przełącznikiem „Dekoduj”.

Polskie znaki: kodować czy nie

W dokumentach UTF-8 litery typu ą czy ł mogą zostać zwykłym tekstem. Encje (&aogon; albo ą) przydają się w e-mailach, XML i starszych systemach, które gubią kodowanie znaków.

Pułapka: podwójne kodowanie

Tekst <b> po pierwszym kodowaniu to <b>, a po drugim &lt;b&gt;. Przeglądarka pokaże wtedy <b> zamiast <b>. Narzędzie ostrzega, gdy wejście wygląda na już zakodowane.

Oceń to narzędzie:

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.

Koder HTML online – bezpieczne kodowanie znaków i encji dla stron, CMS-ów i newsletterów

Koder HTML zamienia znaki, które przeglądarka czyta jako kod (<, >, &, cudzysłów i apostrof), na encje HTML, np. < i &. Wynik aktualizuje się podczas pisania, a całość działa lokalnie w przeglądarce: treść nie jest wysyłana na serwer. Do wyboru masz zakres podstawowy albo z encjami nazwanymi (polskie litery, €, ©, półpauza), zapis numeryczny &#…; dla pozostałych znaków spoza ASCII, zamianę spacji na   i nowych wierszy na <br>, usuwanie skryptów lub wszystkich znaczników oraz formatowanie albo minifikację kodu przed kodowaniem. Przełącznik „Dekoduj” odwraca operację.

Po co kodować HTML?

Kodowanie HTML sprawia, że znaki specjalne są wyświetlane jako tekst, a nie interpretowane jako znaczniki. Bez tego fragment <b> wklejony do artykułu pogrubi resztę akapitu, a ciąg &copy w zwykłym zdaniu przeglądarka pokaże jako ©. Zakodowany tekst wygląda na stronie dokładnie tak jak oryginał.

Kod pokazany w artykule, na forum lub w dokumentacji jest widoczny, a nie wykonywany.
Tekst wstawiony do wartości atrybutu w cudzysłowie nie zamknie go przedwcześnie.
Szablon e-maila lub panel administracyjny nie rozsypie się przez przypadkowy znacznik.

Tryby kodowania dopasowane do zadania

Zakres Znaki specjalne zamienia tylko pięć znaków: &, <, >, " i '. Odpowiada funkcji PHP htmlspecialchars() z flagą ENT_QUOTES, z tą różnicą, że apostrof ma postać '. Zakres + nazwane encje dodatkowo koduje 55 popularnych znaków spoza ASCII: polskie litery (&aogon;, &lstrok;), symbole (©, €, °) i typografię (–, &bdquo;, …).

Opcja „Pozostałe znaki spoza ASCII → &#…;” zapisuje numerycznie wszystko, czego nie objęły encje nazwane, także emoji (znak U+1F60E daje 😎). Włączona razem z zakresem „Znaki specjalne” koduje numerycznie również polskie litery: ą to ą.

Jak działa Koder HTML online

Wklejasz tekst lub fragment HTML do pola „Tekst wejściowy” (Ctrl+V albo przycisk „Wklej ze schowka”). Limit to milion znaków.
Wybierasz kierunek: Koduj (tekst → encje) lub Dekoduj (encje → tekst).
Przy kodowaniu ustawiasz zakres, dodatkowe zamiany (spoza ASCII, Spacje →  , Nowe wiersze → <br>), czyszczenie (Usuń bloki <script> i <style>, Usuń wszystkie znaczniki HTML) i formatowanie: bez zmian, wcięcia albo minifikacja.
Wynik odświeża się na bieżąco. Kopiujesz go przyciskiem „Kopiuj wynik” albo przenosisz do pola wejściowego przyciskiem „Użyj wyniku jako wejścia”. Pod wynikiem widać liczbę zamienionych znaków, rozmiar w bajtach, procentową zmianę rozmiaru i listę najczęstszych zamian.

Przykład – kodowanie minimalne

Wejście:

<h1>Zażółć gęślą jaźń & "quote" & 'apostrof'</h1>

Wynik (zakres „Znaki specjalne”):

<h1>Zażółć gęślą jaźń & "quote" & 'apostrof'</h1>

Zamienionych znaków: 10. Polskie litery zostają bez zmian, co w dokumencie UTF-8 jest poprawne. Z zakresem „+ nazwane encje” słowo „Zażółć” zmieni się w Za&zdot;ó&lstrok;&cacute;.

Przykład – encje nazwane, numeryczne i  

Wejście (trzy spacje po dwukropku):

Cena: 49 € – ½ ceny

Wynik („+ nazwane encje” i „Spacje →  ”):

Cena:   49 € – ½ ceny

Ten sam tekst z zakresem „Znaki specjalne”, opcją „spoza ASCII” i twardymi spacjami:

Cena:   49 € – ½ ceny

W obu wariantach zamienionych znaków jest 10: siedem spacji i trzy symbole. Wielokrotne odstępy przetrwają w edytorach, które zwykłe spacje łączą w jedną.

Gdy wejście składa się z gotowych encji i nie ma w nim „gołych” znaków & < > " ', narzędzie ostrzega przed podwójnym kodowaniem: <b> zakodowane drugi raz daje &lt;b&gt;, a przeglądarka pokaże wtedy encję zamiast znacznika. W takiej sytuacji wybierz „Dekoduj” albo osobny dekoder HTML.

Najczęstsze zastosowania

CMS i blogi: wklejanie przykładów kodu do edytorów, które „czyszczą” znaczniki albo je wykonują.
Newslettery i buildery e-maili: numeryczne encje polskich liter i symboli w systemach, które gubią kodowanie UTF-8.
XML i kanały RSS: XML zna tylko pięć encji nazwanych (&, <, >, ", '), więc € czy – bez definicji w DTD zepsują plik. Tu sprawdzi się zakres „Znaki specjalne” z opcją „spoza ASCII”.
Formularze i panele administracyjne: wyświetlanie kodu jako treści, a nie jako elementów strony.
Instrukcje i dokumentacja: czytelne przykłady z tagami i encjami.

Dobre praktyki kodowania HTML

Wybór trybu

Do treści strony zapisanej w UTF-8 wystarczy zakres „Znaki specjalne”: wynik jest krótszy i czytelny. Encje nazwane lub numeryczne wybieraj, gdy tekst trafia do e-maila, XML albo starszego systemu. Encje w rodzaju &aogon; czy &zdot; należą do HTML5 i parsery zgodne tylko z HTML 4 ich nie rozpoznają; zapis numeryczny ą działa wszędzie.

Spacje i odstępy

Opcja „Spacje →  ” zamienia każdą spację, także pojedynczą. Wynik rośnie, a tekst przestaje się zawijać w miejscach spacji, więc używaj jej do wcięć i wyrównań, a nie do całych akapitów.

Bezpieczeństwo

„Usuń bloki <script> i <style>” wycina je razem z zawartością, a „Usuń wszystkie znaczniki HTML” zostawia sam tekst. Samo kodowanie chroni tekst między znacznikami i w atrybutach w cudzysłowie. Nie wystarcza wewnątrz <script>, w adresach href i src ani w atrybutach bez cudzysłowu.

Porządek w kodzie

„Wcięcia” rozbija sąsiednie znaczniki na osobne wiersze z wcięciem dwóch spacji na każdy poziom zagnieżdżenia. „Minifikuj” usuwa komentarze HTML i odstępy między znacznikami, a ciągi białych znaków skraca do jednej spacji. Kolejność jest stała: najpierw czyszczenie, potem formatowanie, na końcu kodowanie.

Ten sam znak w różnych ustawieniach kodera

Znak	Znaki specjalne	+ nazwane encje	Znaki specjalne + spoza ASCII	Nazwane + spoza ASCII
`<`	`<`	`<`	`<`	`<`
`'`	`'`	`'`	`'`	`'`
ą	bez zmian	`&aogon;`	`ą`	`&aogon;`
€	bez zmian	`€`	`€`	`€`
ü (brak na liście nazwanych)	bez zmian	bez zmian	`ü`	`ü`
emoji U+1F60E	bez zmian	bez zmian	`😎`	`😎`

Spacja zmienia się w   tylko po zaznaczeniu „Spacje →  ”, niezależnie od zakresu. Pełną listę encji nazwanych obsługiwanych przez koder pokazuje ściąga pod narzędziem.

FAQ – najczęstsze pytania o kodowanie HTML

Czym różni się kodowanie minimalne od pełnego?

Minimalne (zakres „Znaki specjalne”) zamienia tylko &, <, >, cudzysłów i apostrof. Pełniejsze kodowanie uzyskasz, dodając encje nazwane dla 55 znaków i opcję „spoza ASCII”, która zapisze numerycznie całą resztę, łącznie z emoji.

Kiedy używać „Spacje →  ”?

W edytorach e-maili, kreatorach landing page'y i systemach, które łączą wielokrotne spacje w jedną.   zachowuje liczbę odstępów, ale blokuje też zawijanie wiersza w tym miejscu.

Jak zamienić encje HTML z powrotem na tekst?

Przełącz kierunek na „Dekoduj” i wklej tekst z encjami. Rozwiązywane są encje nazwane HTML5 oraz zapisy dziesiętne (ą) i szesnastkowe (ą); znaczniki w wyniku nie są wykonywane.

Czym różnią się encje nazwane od numerycznych?

Nazwane (©, €) łatwiej przeczytać w kodzie, ale istnieją tylko dla wybranych znaków i nie każdy parser je zna. Numeryczne (©, €) działają w każdym parserze HTML i XML. Znaki bez nazwanej encji, np. ü czy emoji, koder zapisuje numerycznie tylko przy włączonej opcji „spoza ASCII”.

Czy mój tekst jest wysyłany na serwer?

Nie. Kodowanie i dekodowanie odbywa się w całości w przeglądarce. Treść nie jest przesyłana ani zapisywana, a po zamknięciu karty znika.

Do czego służy opcja „Nowe wiersze → <br>”?

Dopisuje znacznik <br> na końcu każdego wiersza oprócz ostatniego, więc tekst wklejony do HTML zachowa podział na linie. Sam znacznik <br> nie jest kodowany, dzięki czemu działa po wklejeniu do szablonu.

Zakoduj treść już teraz

Wklej tekst lub fragment strony, wybierz zakres i styl encji, a wynik pojawi się od razu. Skopiuj go przyciskiem „Kopiuj wynik” albo użyj jako nowego wejścia. Skrót Ctrl+Enter uruchamia kodowanie z klawiatury.

Rozpocznij kodowanie