Koder i dekoder encji HTML

Jak korzystać z kodera encji HTML

1. 1 Wybierz kierunek. Zakoduj zamienia znaki na encje, Odkoduj zamienia encje z powrotem na znaki.
2. 2 Wpisz lub wklej tekst. Wynik pojawia się na bieżąco, niczego nie trzeba zatwierdzać.
3. 3 Przy kodowaniu wybierz, czy zamieniać tylko znaki <, >, &, " i ', czy także polskie znaki i symbole, oraz w jakim formacie mają być encje.
4. 4 Skopiuj wynik przyciskiem Kopiuj. Przyciskiem Zamień przeniesiesz go do pola wejściowego i sprawdzisz, czy da się go przekonwertować z powrotem.

Co potrafi narzędzie

• odkodowuje wszystkie nazwane encje z HTML5, których jest ponad 2 000, a także encje numeryczne, dokładnie tak jak przeglądarka
• poprawnie konwertuje także emoji, na przykład 😀 na 😀
• ostrzega, gdy tekst zawiera już encje albo został zakodowany dwukrotnie, i proponuje poprawkę jednym kliknięciem
• przy kodowaniu oferuje encje nazwane, dziesiętne i szesnastkowe
• łamania wierszy, tabulatory i resztę tekstu pozostawia bez zmian
• wszystko przetwarza bezpośrednio w Twojej przeglądarce, nic nie trafia na serwer

Czym są encje HTML

Encja HTML to zapis znaku za pomocą zwykłych liter i cyfr. Zaczyna się znakiem & i kończy średnikiem: < oznacza znak <, a © znak ©. Encje są potrzebne przede wszystkim przy znakach, które mają w HTML specjalne znaczenie. Gdyby wpisać na stronie <b> bezpośrednio, przeglądarka uznałaby to za znacznik i pogrubiłaby dalszy tekst. Zapis <b> wyświetli się natomiast dokładnie jako <b>.

Czym różni się encja HTML od Unicode?

Unicode to światowa tabela znaków, w której każdy znak ma swój numer, na przykład © ma numer 169 (U+00A9). Encja HTML to tylko sposób zapisania takiego znaku w kodzie HTML. Encja numeryczna © zawiera bezpośrednio numer z Unicode, a nazwana © jest jego czytelnym skrótem. Na stronie w UTF-8 możesz też wpisać znak bezpośrednio, efekt będzie taki sam.

Które znaki trzeba w HTML zastąpić encją

Na stronie w kodowaniu UTF-8 musisz zastąpić tylko pięć znaków. Pozostałe, łącznie z polskimi literami, możesz wpisywać bezpośrednio. Pierwszy z nich, &, to ampersand. Powstał z połączenia liter łacińskiego słowa et, czyli „i”.

Właśnie te pięć znaków zamienia funkcja htmlspecialchars w PHP oraz automatyczne kodowanie w szablonach Blade, Twig czy React.

Encje nazwane, dziesiętne i szesnastkowe

Ten sam znak można zapisać na trzy sposoby. Przeglądarka wyświetli je identycznie, różnią się tylko zapisem.

• Nazwana encja, taka jak ©, jest łatwa do odczytania, ale własną nazwę ma tylko część znaków.
• Dziesiętna encja © zawiera numer znaku w Unicode i działa dla każdego znaku, także dla emoji.
• Szesnastkowa encja © to ten sam numer w systemie szesnastkowym, w którym zwykle podaje się Unicode, na przykład U+00A9.

W nazwach encji liczy się wielkość liter: Ł to wielkie Ł, a ł małe ł.

Lista encji HTML i znaków specjalnych

Najczęściej używane encje podzielone na grupy. Kliknij encję, aby ją skopiować. Możesz szukać po nazwie, opisie, samym znaku albo po numerze, na przykład 8226.

Znaki bez nazwy, takie jak ✔ czy emoji, zapiszesz tylko encją numeryczną. Kolumna CSS zawiera zapis dla właściwości content, więcej znajdziesz w części o CSS i JavaScripcie.

Jak zrobić listę punktowaną w HTML?

Do listy z punktorami użyj znaczników <ul> i <li>. Przeglądarka sama doda punktory, a ich kształt zmienisz w CSS, na przykład list-style-type: square dla kwadracików albo list-style-type: "✓ " dla ptaszków. Encji • używaj tylko wtedy, gdy punktor jest potrzebny wewnątrz wiersza, na przykład w stopce Kontakt • Polityka prywatności.

Jak wstawić strzałkę w HTML, w CSS i z klawiatury

Najczęściej używane strzałki i trójkąty oraz wszystkie sposoby ich zapisu. Kod z kolumny Word wpisz w dokumencie i zaraz po nim naciśnij Alt+X, a Word zamieni go na znak.

Kod Alt wpisuj z wciśniętym lewym Altem na klawiaturze numerycznej, cyfry nad literami nie działają. Word dodatkowo sam zamienia --> na →, <-- na ← i ==> na ⇒. Trójkąty ▲ i ▼ nie mają własnej nazwy encji, dlatego zapisz je numerycznie.

Jak wpisać ©, ® i ™

Znaki copyright, zastrzeżonego znaku towarowego i znaku towarowego najczęściej trafiają do stopki strony. Tak wpiszesz je w HTML i w zwykłych programach:

Skróty dla Maca dotyczą angielskiego układu klawiatury. Przy innym układzie otwórz przeglądarkę znaków skrótem Ctrl+Cmd+spacja i wyszukaj znak. W Wordzie (c), (r) i (tm) same zamienią się na symbol. W stopce strony wystarczy wpisać na przykład © 2026 Nazwa firmy.

Jak wpisać symbol, którego nie ma na klawiaturze

Jeśli symbol chcesz wstawić do zwykłego tekstu, a nie do kodu HTML, encja nie jest potrzebna. W Windows 10 i 11 panel z symbolami i emoji otworzysz skrótem Win+kropka, na Macu skrótem Ctrl+Cmd+spacja. Symbol możesz też skopiować z listy powyżej.

Twarda spacja  

Twarda spacja wygląda jak zwykła, ale przeglądarka nie złamie w tym miejscu wiersza. W polskich tekstach stosuje się ją przede wszystkim tam, gdzie przeniesienie do nowej linii wyglądałoby jak błąd:

w Warszawie

jednoliterowe spójniki i przyimki a, i, o, u, w, z, czyli tak zwane sierotki, nie powinny zostawać na końcu wiersza

5 kg

liczba i jednostka miary albo waluta, na przykład 25 °C, 5 kg lub 100 zł

dr Nowak

tytuły i skróty, na przykład dr Nowak, prof. Kowalski albo sp. z o.o.

1 stycznia

daty, na przykład 1 stycznia 2026 r.

10 000

spacja oddzielająca tysiące

Przy długich słowach w wąskich kolumnach przyda się z kolei ­, czyli miękki dywiz: przeglądarka podzieli słowo w tym miejscu i doda łącznik tylko wtedy, gdy słowo nie zmieści się w wierszu.

Jak wstawić twardą spację w Wordzie, Excelu i na Macu

Word w Windows

Ctrl+Shift+spacja

Excel, PowerPoint i inne programy w Windows

Alt+0160 na klawiaturze numerycznej

Mac

Option+spacja w większości programów

Dokumenty Google

Wstaw, potem Znaki specjalne i wyszukaj „no-break space”

Wszędzie

skopiuj ją z listy encji HTML powyżej, klikając znak

Dlaczego w wiadomości wyświetla się  ?

Jeśli w e-mailu, SMS-ie albo w aplikacji dostałeś tekst z „ ”, to nie jest żaden skrót ani ukryty link. Nadawca albo aplikacja skopiowali tekst ze strony internetowej i nie zamienili encji twardej spacji na znak. W tym miejscu miała być zwykła spacja. Tak samo może się pojawić & zamiast znaku & albo " zamiast cudzysłowu. Jeśli chcesz czysty tekst, wklej go do narzędzia powyżej i wybierz Odkoduj.

Jak zrobić kilka spacji w HTML

Przeglądarka scala kilka spacji, tabulatorów i znaków nowej linii z rzędu w jedną spację. Dlatego na stronie nie widać, ile spacji wpisano w kodzie. W zależności od potrzeb masz do wyboru takie możliwości:

Jan  Kowalski

jedna lub dwie twarde spacje między słowami, które nie zostaną scalone

a b

szersza spacja,   ma szerokość litery n, a   szerokość litery m

p { text-indent: 2em; }

wcięcie pierwszego wiersza akapitu zamiast ciągu encji  

.ikona { margin-right: 0.5rem; }

odstęp między elementami, na przykład między ikoną a tekstem

.kod { white-space: pre-wrap; }

zachowuje spacje i łamania wierszy dokładnie tak, jak są w tekście

Wcinanie czy wyrównywanie tekstu ciągiem encji   się nie opłaca: przy innej szerokości ekranu układ się rozsypie. Do układu strony służy CSS.

Jak zrobić nową linię i odstęp między wierszami w HTML

Złamanie wiersza w kodzie przeglądarka wyświetli jako zwykłą spację, tak samo jak encję 
. Nową linię i większe odstępy robi się więc inaczej:

Pierwsza linia<br>Druga linia

nowa linia w obrębie jednego akapitu, na przykład w adresie

<p>Akapit</p>

nowy akapit, przeglądarka doda przed nim i po nim odstęp

p { line-height: 1.6; }

wysokość wiersza, czyli odstęp między wierszami w akapicie (interlinia)

p { margin-bottom: 1.5em; }

odstęp między akapitami

.adres { white-space: pre-line; }

zachowuje złamania wierszy z tekstu, na przykład z formularza

Encja 
 tworzy nową linię tylko tam, gdzie złamania wierszy są zachowywane: w znacznikach <textarea> i <pre> albo w atrybucie title, gdzie powstanie z niej dwuwierszowy dymek. Jeśli szukasz symbolu klawisza Enter, to ↵ (↵) albo ⏎ (⏎).

Czy polskie znaki trzeba zapisywać encjami?

Nie, jeśli strona używa kodowania UTF-8, co jest dziś standardem. Wystarczy, że w nagłówku jest <meta charset="utf-8">, a litery takie jak ą, ę, ł czy ż wpisujesz bezpośrednio. Zapisy numeryczne, takie jak ł dla litery ł, stosowano w czasach kodowań ISO-8859-2 i Windows-1250, gdy polskie znaki na innym komputerze łatwo zamieniały się w krzaczki. Dziś przydają się tylko wyjątkowo, na przykład w systemie, który nie obsługuje UTF-8, albo gdy chcesz mieć w kodzie źródłowym wyłącznie znaki ASCII. Do tego służy opcja Koduj także polskie znaki i symbole.

Polskie znaki na stronie wyświetlają się źle

Gdy zamiast tekstu „Żółta łódź” pojawiają się dziwne znaki, czyli tak zwane krzaczki, prawie zawsze chodzi o niezgodność kodowania. Po tym, co dokładnie widzisz, poznasz, gdzie leży błąd:

Jeśli zamiast litery widzisz sam kod, taki jak ł albo ł, to nie jest problem kodowania, tylko podwójnie zakodowane encje. Rozwiązanie znajdziesz w części o najczęstszych błędach.

Encje HTML a bezpieczeństwo (XSS)

Zamiana znaków <, >, &, " i ' to podstawowa ochrona przed atakiem XSS, w którym napastnik wstrzykuje na stronę własny skrypt. Gdy dane <script> wyświetlą się jako <script>, przeglądarka tylko je wypisze i niczego nie uruchomi. Ta ochrona ma jednak swoje granice:

• Encje chronią tylko w treści strony i w atrybutach, których wartość jest w cudzysłowie. Atrybut bez cudzysłowu, na przykład title=wartość, da się przerwać nawet zwykłą spacją.
• Nie chronią w JavaScripcie, w CSS ani w adresie linku. Link javascript:alert(1) nie zawiera niczego, co podlegałoby kodowaniu, a mimo to uruchamia kod. Adresy pochodzące od użytkownika sprawdzaj więc osobno.
• W atrybutach zdarzeń, takich jak onclick, przeglądarka odkodowuje encje jeszcze przed uruchomieniem kodu, więc tam nie chronią przed atakiem.
• Koduj dopiero przy wyświetlaniu w HTML, a nie przy zapisie do bazy danych. Inaczej łatwo o to, że tekst zostanie zakodowany dwukrotnie.
• Najbezpieczniej jest zostawić kodowanie systemowi szablonów, który robi to automatycznie, na przykład Blade, Twig, React albo Vue.

Encje HTML w CSS i JavaScripcie

Encje działają tylko w HTML. W CSS i w łańcuchach znaków JavaScriptu ten sam znak zapisuje się inaczej, a zapis → wyświetliłby się tam dosłownie. Tak wygląda strzałka → w poszczególnych językach:

HTML

<span>&rarr;</span>  albo  <span>&#8594;</span>

CSS

.dalej::after { content: "\2192"; }

JavaScript

element.textContent = "\u2192";

JavaScript (emoji)

element.textContent = "\u{1F600}";

Zapis dla CSS znajdziesz przy każdej encji na liście powyżej. Jeśli po kodzie w CSS następuje kolejna litera od a do f albo cyfra, oddziel je spacją, inaczej zostaną odczytane jako część kodu.

Czy encje HTML działają w React i Markdownie?

Encje HTML w PHP, JavaScripcie i Pythonie

W większości języków nie trzeba pisać własnego kodu do kodowania encji. Tak wygląda to w najpopularniejszych z nich:

$text = 'Tom & Jerry <3';

echo htmlspecialchars($text, ENT_QUOTES | ENT_HTML5, 'UTF-8');
// Tom &amp; Jerry &lt;3

echo html_entity_decode('&lt;p&gt;&copy; 2026&lt;/p&gt;', ENT_QUOTES | ENT_HTML5, 'UTF-8');
// <p>© 2026</p>

{{ $comment }}     {{-- koduje automatycznie --}}
{!! $html !!}      {{-- wypisuje bez kodowania --}}

e('Tom & Jerry'); // Tom & Jerry

function escapeHtml(text) {
  return text.replace(/[&<>"']/g, (char) => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
  })[char]);
}

function decodeHtml(html) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = html;
  return textarea.value;
}

import html

html.escape('Tom & Jerry <3')
# 'Tom &amp; Jerry &lt;3'

html.unescape('&lt;p&gt;&copy; 2026&lt;/p&gt;')
# '<p>© 2026</p>'

Której funkcji PHP użyć

htmlspecialchars()

koduje pięć znaków specjalnych, do bezpiecznego wyświetlania w HTML to wystarczy

htmlentities()

koduje wszystko, co ma nazwaną encję, łącznie z polskimi literami, na stronie w UTF-8 nie jest to potrzebne

htmlspecialchars_decode()

odkodowuje z powrotem tylko te pięć znaków specjalnych

html_entity_decode()

odkodowuje wszystkie encje, nazwane i numeryczne

Od PHP 8.1 obie funkcje domyślnie kodują także apostrof, a nieprawidłowe znaki UTF-8 zastępują znakiem �. W starszych wersjach podaj flagi ENT_QUOTES | ENT_SUBSTITUTE ręcznie.

Najczęstsze błędy przy encjach HTML