Lekcja 11.5: Encje znakowe HTML (HTML Entities)
Wyświetlanie znaków specjalnych
W HTML niektóre znaki mają specjalne znaczenie, ponieważ są częścią składni samego języka. Najbardziej oczywiste przykłady to znak mniejszości (<
), który rozpoczyna znacznik, oraz znak większości (>
), który go kończy. Co zrobić, jeśli chcemy wyświetlić te znaki dosłownie na stronie, np. w przykładzie kodu HTML?
Do tego właśnie służą encje znakowe HTML (HTML Entities). Są to specjalne sekwencje znaków, które reprezentują znaki zastrzeżone, symbole, znaki niewidoczne lub inne znaki, które mogą być trudne do wpisania bezpośrednio lub mogą powodować konflikty ze składnią HTML.
Składnia encji znakowych
Encje znakowe mogą mieć dwie formy:
- Encje nazwane (Named Entities): Mają postać
&nazwa;
(znak ampersand, nazwa encji, średnik). Są łatwiejsze do zapamiętania i odczytania przez człowieka.- Przykład:
<
reprezentuje<
,>
reprezentuje>
,&
reprezentuje&
,©
reprezentuje ©.
- Przykład:
- Encje numeryczne (Numeric Entities): Mają postać
&#numer;
(ampersand, hash, numer dziesiętny znaku w Unicode, średnik) lub&#xnumer_hex;
(ampersand, hash, x, numer heksadecymalny znaku w Unicode, średnik).- Przykład:
<
reprezentuje<
,>
reprezentuje>
,&
reprezentuje&
,©
reprezentuje ©,€
reprezentuje €.
- Przykład:
Obie formy są równoważne i przeglądarka wyświetli ten sam znak. Encje nazwane są często preferowane dla najpopularniejszych znaków ze względu na czytelność, podczas gdy encje numeryczne pozwalają na reprezentację dowolnego znaku z tablicy Unicode.
Najczęściej używane encje znakowe
Istnieje kilka encji, które są szczególnie ważne i często używane:
Znak | Encja nazwana | Encja numeryczna (dziesiętna) | Opis |
---|---|---|---|
< | < |
< |
Znak mniejszości (Less Than) |
> | > |
> |
Znak większości (Greater Than) |
& | & |
& |
Ampersand |
" | " |
" |
Cudzysłów (Quotation Mark) |
' | ' (nie zawsze wspierany w HTML4) |
' |
Apostrof (Apostrophe) |
|
  |
Spacja niełamliwa (Non-Breaking Space) - zapobiega przełamaniu linii w miejscu spacji | |
© | © |
© |
Symbol praw autorskich (Copyright) |
® | ® |
® |
Symbol zarejestrowanego znaku towarowego (Registered Trademark) |
™ | ™ |
™ |
Symbol znaku towarowego (Trademark) |
€ | € |
€ |
Symbol Euro |
£ | £ |
£ |
Symbol Funta szterlinga |
¥ | ¥ |
¥ |
Symbol Jena |
Przykład użycia w kodzie HTML:
<p>Aby utworzyć paragraf, użyj znacznika <p>.</p>
<p>Kosztuje to 10 €.</p>
<p>Prawa autorskie © 2025 Moja Firma.</p>
<p>Ten tekst zawiera cudzysłów (") i apostrof (').</p>
Wynik w przeglądarce:
Aby utworzyć paragraf, użyj znacznika <p>.
Kosztuje to 10 €.
Prawa autorskie © 2025 Moja Firma.
Ten tekst zawiera cudzysłów (") i apostrof (').
Kiedy używać encji?
- Zawsze dla
<
,>
,&
: Jeśli chcesz wyświetlić te znaki dosłownie w treści HTML (poza atrybutami), powinieneś użyć ich encji (<
,>
,&
), aby uniknąć błędów parsowania. - Dla
"
i'
w wartościach atrybutów: Jeśli wartość atrybutu jest otoczona cudzysłowami ("..."
), a chcesz użyć cudzysłowu wewnątrz wartości, użyj"
. Analogicznie dla apostrofów ('...'
i'
lub'
). - Dla spacji niełamliwej (
): Gdy chcesz zapobiec przełamaniu linii między dwoma słowami lub znakami (np. między liczbą a jednostką:10 zł
). - Dla symboli i znaków specjalnych: Dla znaków, które nie są łatwo dostępne na klawiaturze (np. ©, ®, €, ™, £, ¥, ←, →, ♥) lub mogą powodować problemy z kodowaniem (choć przy użyciu UTF-8 jest to mniej problematyczne).
- Dla znaków niewidocznych: Czasami używa się encji do reprezentacji znaków niewidocznych, np. spacji o zerowej szerokości (
​
), co może być przydatne w specyficznych sytuacjach formatowania tekstu.
Dzięki powszechnemu stosowaniu kodowania UTF-8, konieczność używania encji dla znaków narodowych (np. polskich liter) praktycznie zniknęła. Można je wpisywać bezpośrednio w kodzie HTML, pod warunkiem, że plik jest zapisany w UTF-8 i zadeklarowano <meta charset="UTF-8">
.
Znajdowanie encji dla innych znaków
Pełną listę encji nazwanych i numerycznych dla wszystkich znaków Unicode można znaleźć w dokumentacji HTML lub na stronach takich jak:
- W3C Character Entity Reference Chart
- Unicode Character Table (pozwala wyszukiwać znaki i podaje ich kody numeryczne)
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Wyświetl na stronie następujący tekst, używając odpowiednich encji znakowych tam, gdzie jest to konieczne:
Równanie: 2 < 5 & 10 > 3. Znak towarowy™ kosztuje 50 £ lub 60 €.
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład Encji Znakowych</title>
</head>
<body>
<p>Równanie: 2 < 5 & 10 > 3. Znak towarowy™ kosztuje 50 £ lub 60 €.</p>
<!-- Alternatywnie z encjami numerycznymi -->
<p>Równanie: 2 < 5 & 10 > 3. Znak towarowy™ kosztuje 50 £ lub 60 €.</p>
</body>
</html>
Wynik w przeglądarce (dla obu paragrafów):
Równanie: 2 < 5 & 10 > 3. Znak towarowy™ kosztuje 50 £ lub 60 €.
Dodatkowe zadania do samodzielnego wykonania:
- Wyświetl na stronie zdanie:
Aby użyć znacznika
, potrzebujesz atrybutu src="obrazek.jpg".
- Znajdź i wyświetl za pomocą encji numerycznych symbole strzałek: w lewo (←), w prawo (→), w górę (↑), w dół (↓).
- Wyświetl zdanie "To jest bardzo szeroka spacja." używając spacji niełamliwych, aby zapobiec przełamaniu linii w tych miejscach.
Najczęściej zadawane pytania
Co to są encje znakowe HTML?
Są to specjalne sekwencje znaków (zaczynające się od `&` i kończące `;`) używane do reprezentowania znaków zastrzeżonych (np. `<`, `>`, `&`), symboli (np. ©, €) lub innych znaków specjalnych w kodzie HTML.
Jakie są rodzaje encji?
Istnieją encje nazwane (np. `<`, `©`) - łatwiejsze do zapamiętania, oraz encje numeryczne (np. `<`, `©`) - pozwalające na reprezentację dowolnego znaku Unicode.
Kiedy muszę używać encji?
Zawsze, gdy chcesz dosłownie wyświetlić znaki `<`, `>`, `&` w treści HTML. Przydatne są też dla cudzysłowów/apostrofów w atrybutach, spacji niełamliwej (` `) oraz symboli specjalnych.
Czy muszę używać encji dla polskich liter?
Nie, jeśli używasz kodowania UTF-8 (co jest standardem) i zadeklarowałeś `<meta charset="UTF-8">`. Polskie litery (ą, ę, ć itd.) można wpisywać bezpośrednio.
Co to jest ` `?
Jest to encja reprezentująca spację niełamliwą (Non-Breaking Space). Zapobiega ona przełamaniu linii tekstu w miejscu tej spacji, np. między liczbą a jednostką.