HTML-entitás kódoló és dekódoló

Hogyan használja a HTML-entitás kódolót

1. 1 Válassza ki az irányt. A Kódolás a karaktereket entitásokká alakítja, a Dekódolás az entitásokat visszaalakítja karakterekké.
2. 2 Írja be vagy illessze be a szöveget. Az eredmény gépelés közben frissül, semmit nem kell jóváhagyni.
3. 3 Kódolásnál válassza ki, hogy csak a <, >, &, " és ' karakterek változzanak, vagy az ékezetes betűk és a szimbólumok is, és hogy milyen formátumúak legyenek az entitások.
4. 4 Az eredményt a Másolás gombbal másolhatja ki. A Csere gombbal áthelyezi a bemenetbe, és ellenőrizheti, hogy visszaalakítható-e.

Mire képes az eszköz

• dekódolja a HTML5 összes nevesített entitását, amelyből több mint 2 000 van, és a numerikus entitásokat is, pontosan úgy, ahogy a böngésző
• helyesen alakítja át az emojikat is, például a 😀 entitásból 😀 lesz
• figyelmeztet, ha a szöveg már tartalmaz entitásokat vagy kétszer kódolták, és egy kattintással felajánlja a javítást
• kódoláskor nevesített, decimális és hexadecimális entitásokat is kínál
• a sortöréseket, a tabulátorokat és a szöveg többi részét változatlanul hagyja
• mindent közvetlenül a böngészőjében dolgoz fel, semmi nem kerül a szerverre

Mik azok a HTML-entitások

A HTML-entitás egy karakter leírása hétköznapi betűkkel és számjegyekkel. & jellel kezdődik és pontosvesszővel végződik: a < a < karaktert, a © a © jelet jelenti. Entitásokra főleg azoknál a karaktereknél van szükség, amelyeknek a HTML-ben saját jelentésük van. Ha a <b> címkét közvetlenül írná be az oldalba, a böngésző címkének tekintené, és a következő szöveget félkövéren jelenítené meg. A <b> alak viszont pontosan <b> formában jelenik meg.

Mi a különbség a HTML-entitás és a Unicode között?

A Unicode egy világméretű karaktertábla, amelyben minden karakternek saját száma van, például a © száma 169 (U+00A9). A HTML-entitás csak egy módja annak, hogy egy ilyen karaktert leírjon a HTML-kódban. A © numerikus entitás közvetlenül a Unicode-számot tartalmazza, a nevesített © pedig ennek olvasható rövidítése. Egy UTF-8 kódolású oldalon a karaktert közvetlenül is beírhatja, az eredmény ugyanaz.

Mely karaktereket kell a HTML-ben entitásra cserélni

Egy UTF-8 kódolású oldalon csak öt karaktert kell lecserélnie. A többit, az ékezetes betűket is beleértve, közvetlenül is írhatja. Az első közülük, az &, az és-jel, angolul ampersand. A latin et, vagyis „és” szó betűinek összevonásából keletkezett.

Pontosan ezt az öt karaktert cseréli le a PHP htmlspecialchars függvénye, és a Blade, a Twig vagy a React sablonok automatikus kódolása is.

Nevesített, decimális és hexadecimális entitások

Ugyanaz a karakter háromféleképpen írható le. A böngésző mindhármat ugyanúgy jeleníti meg, csak a leírásuk különbözik.

• A nevesített entitás, például a ©, könnyen olvasható, de saját neve csak a karakterek egy részének van.
• A decimális entitás, a ©, a karakter Unicode-számát tartalmazza, és minden karakterre működik, az emojikra is.
• A hexadecimális entitás, a ©, ugyanez a szám tizenhatos számrendszerben, amelyben a Unicode-ot általában megadják, például U+00A9.

Az entitásnevekben számít a kis- és nagybetű: a Ő a nagy Ő, az ő a kis ő.

HTML-entitások és speciális karakterek listája

A leggyakrabban használt entitások csoportokba rendezve. Az entitásra kattintva kimásolhatja. Kereshet név, leírás, maga a karakter vagy a szám alapján is, például 8226.

A név nélküli karaktereket, például a ✔ jelet vagy az emojikat, csak numerikus entitással írhatja le. A CSS oszlop a content tulajdonsághoz való alakot tartalmazza, erről bővebben a CSS-ről és JavaScriptről szóló részben olvashat.

Hogyan készítsek felsorolást HTML-ben?

Felsoroláshoz használja az <ul> és a <li> címkét. A felsorolásjeleket a böngésző maga teszi ki, alakjukat CSS-ben módosíthatja, például list-style-type: square négyzetekhez vagy list-style-type: "✓ " pipákhoz. A • entitást csak akkor használja, ha a felsorolásjelre egy soron belül van szüksége, például a láblécben: Kapcsolat • Adatvédelem.

Hogyan írjak nyilat HTML-ben, CSS-ben és a billentyűzeten

A leggyakoribb nyilak és háromszögek, és minden mód, ahogyan leírhatja őket. A Word oszlopban lévő kódot írja be a dokumentumba, és közvetlenül utána nyomja meg az Alt+X billentyűket, a Word karakterré alakítja.

Az Alt-kódot a bal Alt nyomva tartása mellett a numerikus billentyűzeten írja be, a betűk feletti számjegyek nem működnek. A Word ráadásul magától nyíllá alakítja a --> (→), a <-- (←) és a ==> (⇒) karaktersort. A ▲ és ▼ háromszögnek nincs saját entitásneve, ezért numerikusan írja le őket.

Hogyan írjam be a ©, ® és ™ jelet

A copyright, a bejegyzett védjegy és a védjegy jelét leggyakrabban a weboldal láblécébe írják. Így írhatja be őket HTML-ben és a hétköznapi programokban:

A Mac-billentyűparancsok az angol billentyűkiosztásra vonatkoznak. Más kiosztásnál nyissa meg a karakterpanelt a Ctrl+Cmd+szóköz billentyűkkel, és keressen rá a jelre. A Word a (c), (r) és (tm) alakot automatikusan jellé alakítja. A weboldal láblécébe elég például ennyit írni: © 2026 Cégnév.

Hogyan írjak be olyan szimbólumot, amely nincs a billentyűzeten

Ha a szimbólumot hétköznapi szövegbe kell beillesztenie, nem HTML-kódba, nincs szükség entitásra. Windows 10 és 11 alatt a szimbólumokat és emojikat tartalmazó panelt a Win+pont billentyűkombinációval nyithatja meg, Macen a Ctrl+Cmd+szóközzel. A szimbólumot a fenti listából is kimásolhatja.

Nem törő szóköz:  

A nem törő szóköz ugyanúgy néz ki, mint a hagyományos, de a böngésző nem tör nála sort. A magyar szövegekben főleg ott használják, ahol a sortörés hibának hatna:

10 kg

szám és mértékegység vagy pénznem, például 25 °C, 5 kg vagy 100 Ft

dr. Kovács

címek és rövidítések, például dr. Kovács Anna vagy id. Nagy Péter

2026. október 2.

dátumok

II. Rákóczi Ferenc

sorszám és az utána álló szó, például uralkodók nevében

10 000

az ezreseket elválasztó szóköz

A hosszú szavakhoz keskeny hasábokban a ­, vagyis a feltételes elválasztás jöhet jól: a böngésző csak akkor választja el ott a szót és tesz ki kötőjelet, ha a szó nem fér ki a sorba.

Hogyan szúrjak be nem törő szóközt Wordben, Excelben vagy Macen

Word Windowson

Ctrl+Shift+szóköz

Excel, PowerPoint és más Windows-programok

Alt+0160 a numerikus billentyűzeten

Mac

Option+szóköz a legtöbb programban

Google Dokumentumok

Beszúrás, majd Speciális karakterek, és keressen rá: „no-break space”

Bárhol

másolja ki a fenti HTML-entitás listából a karakterre kattintva

Miért jelenik meg a   az üzenetemben?

Ha e-mailben, SMS-ben vagy egy alkalmazásban „ ” szöveget tartalmazó üzenetet kapott, az nem rövidítés és nem rejtett hivatkozás. A küldő vagy az alkalmazás egy weboldalról másolta a szöveget, és a nem törő szóköz entitását nem alakította át karakterré. A helyén egy egyszerű szóköznek kellett volna lennie. Ugyanígy megjelenhet az & az & jel helyett vagy a " az idézőjel helyett. Ha tiszta szöveget szeretne, illessze be a fenti eszközbe, és válassza a Dekódolás lehetőséget.

Hogyan tegyek több szóközt a HTML-be

A böngésző az egymás után következő szóközöket, tabulátorokat és sortöréseket egyetlen szóközzé vonja össze. Ezért az oldalon nem látszik, hány szóközt írt a kódba. Attól függően, mire van szüksége, a következő lehetőségek közül választhat:

Kovács  János

egy vagy két nem törő szóköz a szavak között, amelyek nem vonódnak össze

a b

szélesebb szóköz: az   egy n betű, az   egy m betű szélességű

p { text-indent: 2em; }

a bekezdés első sorának behúzása   entitások sora helyett

.ikon { margin-right: 0.5rem; }

távolság az elemek között, például az ikon és a szöveg között

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

pontosan úgy megtartja a szóközöket és a sortöréseket, ahogy a szövegben vannak

A szöveget nem érdemes   entitások sorával behúzni vagy igazítani: más képernyőszélességen az elrendezés szétesik. Az oldal elrendezésére a CSS való.

Hogyan tegyek sortörést és sorközt a HTML-be

A kódban lévő sortörést a böngésző egyszerű szóközként jeleníti meg, ugyanúgy, mint a 
 entitást. Az új sort és a nagyobb térközöket ezért másképp kell megoldani:

Első sor<br>Második sor

új sor egy bekezdésen belül, például postacímben

<p>Bekezdés</p>

új bekezdés, a böngésző előtte és utána térközt hagy

p { line-height: 1.6; }

sormagasság, vagyis a bekezdés sorai közötti távolság

p { margin-bottom: 1.5em; }

távolság a bekezdések között

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

megtartja a szöveg sortöréseit, például egy űrlapból érkező szövegben

A 
 entitás csak ott hoz létre új sort, ahol a sortörések megmaradnak: a <textarea> és a <pre> címkében, illetve a title attribútumban, ahol kétsoros buboréksúgó lesz belőle. Ha az Enter billentyű jelét keresi, az a ↵ (↵) vagy a ⏎ (⏎).

Kellenek entitások az ékezetes betűkhöz?

Nem, ha az oldal UTF-8 kódolású, ami ma már alapértelmezés. Elég, ha a fejlécben szerepel a <meta charset="utf-8">, és az olyan betűket, mint az á, é, ő vagy ű, közvetlenül írhatja. Az olyan numerikus alakokat, mint a ő, az ISO-8859-2 és a Windows-1250 kódolások idején használták, amikor az ékezetes betűk egy másik számítógépen könnyen értelmetlen karakterekké változtak. Ma már csak kivételesen hasznosak, például olyan rendszerhez, amely nem tudja kezelni az UTF-8-at, vagy ha a forráskódban csak ASCII-karaktereket szeretne látni. Erre szolgál Ékezetes betűk és szimbólumok kódolása beállítás.

Rosszul jelennek meg az ékezetes betűk a weboldalon

Ha a „Hűvös idő” szöveg helyett furcsa karakterek jelennek meg, szinte mindig kódolási eltérésről van szó. Abból, hogy pontosan mit lát, kiderül, hol van a hiba:

Ha a betű helyett közvetlenül egy kódot lát, például ő vagy ő, akkor nem kódolási hibáról, hanem az entitások kétszeres kódolásáról van szó. A megoldást a gyakori hibákról szóló részben találja.

HTML-entitások és biztonság (XSS)

A <, >, &, " és ' karakterek cseréje az alapvető védelem az XSS-támadás ellen, amelynek során a támadó saját szkriptet juttat az oldalba. Ha a <script> bemenet <script> alakban jelenik meg, a böngésző csak kiírja, de nem futtatja. Ennek azonban megvannak a határai:

• Az entitások csak az oldal szövegében és az idézőjelek közé tett attribútumértékekben védenek. Az idézőjel nélküli attribútumból, például title=érték, akár egy egyszerű szóközzel is ki lehet törni.
• Nem védenek JavaScriptben, CSS-ben és a hivatkozások címében. A javascript:alert(1) hivatkozásban nincs semmi, amit kódolni kellene, mégis kódot futtat. A felhasználói bemenetből származó címeket ezért külön ellenőrizze.
• Az olyan eseményattribútumokban, mint az onclick, a böngésző már a kód futtatása előtt dekódolja az entitásokat, így ott nem védenek a támadás ellen.
• A HTML-be való kiíráskor kódoljon, ne az adatbázisba mentéskor. Különben könnyen előfordul, hogy a szöveget kétszer kódolja.
• A legbiztonságosabb a kódolást egy sablonrendszerre bízni, amely ezt automatikusan elvégzi, például a Blade, a Twig, a React vagy a Vue.

HTML-entitások CSS-ben és JavaScriptben

Az entitások csak HTML-ben működnek. CSS-ben és a JavaScript-karakterláncokban ugyanazt a karaktert másképp kell leírni, a → ott szó szerint jelenne meg. Így néz ki a → nyíl az egyes nyelvekben:

HTML

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

CSS

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

JavaScript

element.textContent = "\u2192";

JavaScript (emoji)

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

A CSS-alakot a fenti listában minden entitásnál megtalálja. Ha a CSS-kód után egy a és f közötti betű vagy számjegy következik, válassza el őket szóközzel, különben a kód részeként olvasódnak be.

Működnek a HTML-entitások Reactben és Markdownban?

HTML-entitások PHP-ban, JavaScriptben és Pythonban

A legtöbb nyelvben nem kell saját kódot írni az entitások kódolásához. Így néz ki ez a leggyakrabban használtakban:

$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 }}     {{-- automatikusan kódol --}}
{!! $html !!}      {{-- kódolás nélkül írja ki --}}

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>'

Melyik PHP-függvényt használjam

htmlspecialchars()

az öt speciális karaktert kódolja, a HTML-be való biztonságos kiíráshoz ez elég

htmlentities()

mindent kódol, aminek van nevesített entitása, az ékezetes betűket is, UTF-8 kódolású oldalon erre nincs szükség

htmlspecialchars_decode()

csak az öt speciális karaktert dekódolja vissza

html_entity_decode()

minden entitást dekódol, a nevesítetteket és a numerikusakat is

A PHP 8.1 óta mindkét kódoló függvény alapértelmezés szerint az aposztrófot is kódolja, az érvénytelen UTF-8 karaktereket pedig � jellel helyettesíti. Régebbi verziókban az ENT_QUOTES | ENT_SUBSTITUTE jelzőket kézzel adja meg.

Gyakori hibák a HTML-entitásoknál