Kompletny przewodnik po encjach HTML

Encje HTML są jednym z najbardziej podstawowych, a jednocześnie często źle rozumianych aspektów rozwoju webowego. Są mechanizmem, dzięki któremu przeglądarki mogą wyświetlać znaki, które w przeciwnym razie zostałyby zinterpretowane jako znaczniki HTML, i odgrywają kluczową rolę w bezpieczeństwie webowym. Niezależnie od tego, czy kodujesz znaki specjalne, aby zapobiec atakom cross-site scripting, wyświetlasz symbole matematyczne, czy zapewniasz poprawne renderowanie treści w różnych kodowaniach, zrozumienie encji HTML jest niezbędne dla każdego developera webowego.

Czym są encje HTML?

Encja HTML to sekwencja znaków reprezentująca pojedynczy znak w HTML. Encja zaczyna się od znaku ampersand (&) i kończy średnikiem (;). Gdy przeglądarka napotyka encję, zastępuje ją odpowiednim znakiem podczas renderowania. Ten mechanizm pozwala na umieszczanie w HTML znaków, które w przeciwnym razie byłyby niemożliwe lub problematyczne.

<) rozpoczyna znacznik, znak większości (>) kończy znacznik, a znak ampersand (&) rozpoczyna odwołanie do encji. Jeśli chcesz wyświetlić te znaki jako widoczną treść, a nie znaczniki, musisz je zakodować jako encje.

Popularne encje HTML

Chociaż HTML definiuje ponad 2 000 nazwanych encji, tylko kilka z nich jest często używanych w codziennym rozwoju webowym. Oto encje, które najczęściej napotkasz i będziesz używać:

Pięć wymaganych encji

Popularne encje symboli

Encje numeryczne vs nazwane

Encje HTML występują w dwóch formach: nazwanej i numerycznej. Zrozumienie różnicy pomaga wybrać właściwą encję w każdej sytuacji.

Encja nazwana

< reprezentuje znak mniejszości, a © reprezentuje symbol praw autorskich. Encje nazwane są bardziej czytelne i łatwiejsze do zapamiętania, co czyni kod źródłowy HTML łatwiejszym w utrzymaniu. Jednak encje nazwane istnieją tylko dla ograniczonego zestawu znaków — około 2 000, podczas gdy w Unicode jest ponad 140 000 znaków.

Encja numeryczna

Encje numeryczne odwołują się do znaków poprzez ich punkt kodowy Unicode. Występują w dwóch formach: dziesiętnej i szesnastkowej. Dziesiętne encje numeryczne używają formatu &#NNN;, gdzie NNN to dziesiętny punkt kodowy. Encje szesnastkowe używają formatu &#xHHH;, gdzie HHH to szesnastkowy punkt kodowy. Na przykład symbol praw autorskich może być zapisany jako © (dziesiętnie) lub © (szesnastkowo).

Encje numeryczne mogą reprezentować dowolny znak Unicode, co czyni je niezbędnymi dla znaków, które nie mają nazwanych odwołań do encji. Jeśli potrzebujesz wyświetlić rzadkie znaki CJK, glify historycznych pism lub emoji, które nie mają nazwanych encji, musisz użyć formy numerycznej.

Kiedy używać którego

• <, >, ", ') oraz popularnych symboli, takich jak ©, ®, ™. Są one bardziej czytelne i samodokumentujące się.
• Używaj encji numerycznych, gdy potrzebujesz znaku, który nie ma nazwanej encji, lub gdy programowo generujesz HTML i potrzebujesz spójnego, uniwersalnego podejścia do kodowania.
• Używaj szesnastkowych encji numerycznych podczas pracy z punktami kodowymi Unicode, ponieważ szesnastkowy jest standardową notacją w dokumentacji Unicode i tabelach znaków.

Kiedy używać encji HTML

Wiedza o tym, kiedy używać encji, jest równie ważna jak wiedza o tym, jak ich używać. Oto główne scenariusze, w których encje są konieczne lub korzystne:

1. Wyświetlanie znaków zastrzeżonych

<. Jeśli napiszesz goły <, przeglądarka spróbuje go przeanalizować jako początek znacznika HTML, co może zepsuć układ strony lub stworzyć lukę bezpieczeństwa.

2. Zapobiegaj niejednoznacznym ampersandom

Znak ampersand, po którym następuje litera i średnik, jest zawsze interpretowany jako odwołanie do encji. Jeśli w treści znajduje się ampersand, który nie jest częścią encji (np. w "Tom & Jerry"), należy go zakodować jako &. Niezakodowany ampersand, po którym następuje tekst pasujący do nazwy encji, zostanie nieprawidłowo zdekodowany. Na przykład niezakodowany "AT&T" może zostać wyświetlony jako "AT&T", jeśli przeglądarka zinterpretuje &T jako odwołanie do encji (mimo że &T nie jest prawidłową encją, takie zachowanie jest technicznie nieprawidłowe).

3. Uwzględnij znaki nieklawiaturowe

Znaki takie jak myślniki, symbole praw autorskich i operatory matematyczne mogą być trudne do wpisania na standardowej klawiaturze. Encje zapewniają niezawodny sposób na włączenie tych znaków bez polegania na metodach wprowadzania edytora lub mapach znaków. Na przykład — jest często łatwiejsze do wpisania niż szukanie znaku myślnika na klawiaturze.

4. Spacje niełamliwe

Encja   tworzy spację niełamliwą, zapobiegając zawijaniu wiersza przez przeglądarkę. Jest to kluczowe dla utrzymania powiązanych słów w tej samej linii, np. "10 kg", "Rozdział 3" lub nazwy marek, które nie powinny być dzielone. Jest również często używana do tworzenia wizualnych odstępów w układach, gdzie CSS jest nieodpowiedni.

Implikacje bezpieczeństwa: ochrona przed XSS

Kodowanie encji HTML jest jedną z najważniejszych linii obrony przed atakami cross-site scripting (XSS). XSS występuje, gdy atakujący może wstrzyknąć wykonywalny kod na stronę internetową wyświetlaną innym użytkownikom. Kodowanie encji zapobiega temu, konwertując niebezpieczne znaki na ich bezpieczne odpowiedniki encji.

Jak kodowanie encji zapobiega XSS

, a strona renderuje to bez kodowania, przeglądarka wykona ten skrypt. Jednak jeśli wyjście jest zakodowane encjami, staje się <script>alert('xss')</script>, a przeglądarka wyświetla to jako dosłowny tekst, a nie wykonuje kodu.

Zasady kodowania dla konkretnych kontekstów

Kodowanie encji działa w kontekście treści HTML i atrybutów, ale różne konteksty wymagają różnych strategii kodowania:

• <, >, & jako encje. Zapobiega to wstrzykiwaniu nowych znaczników HTML.
• <, >, &, ", ' jako encje. Cudzysłowy muszą być kodowane, aby zapobiec wyjściu poza wartość atrybutu.