Kurs HTML

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:

  1. Encje nazwane (Named Entities): Mają postać &nazwa; (znak ampersand, nazwa encji, średnik). Są łatwiejsze do zapamiętania i odczytania przez człowieka.
    • Przykład: &lt; reprezentuje <, &gt; reprezentuje >, &amp; reprezentuje &, &copy; reprezentuje ©.
  2. 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: &#60; reprezentuje <, &#62; reprezentuje >, &#38; reprezentuje &, &#169; reprezentuje ©, &#x20AC; reprezentuje €.

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
< &lt; &#60; Znak mniejszości (Less Than)
> &gt; &#62; Znak większości (Greater Than)
& &amp; &#38; Ampersand
" &quot; &#34; Cudzysłów (Quotation Mark)
' &apos; (nie zawsze wspierany w HTML4) &#39; Apostrof (Apostrophe)
  &nbsp; &#160; Spacja niełamliwa (Non-Breaking Space) - zapobiega przełamaniu linii w miejscu spacji
© &copy; &#169; Symbol praw autorskich (Copyright)
® &reg; &#174; Symbol zarejestrowanego znaku towarowego (Registered Trademark)
&trade; &#8482; Symbol znaku towarowego (Trademark)
&euro; &#8364; Symbol Euro
£ &pound; &#163; Symbol Funta szterlinga
¥ &yen; &#165; Symbol Jena

Przykład użycia w kodzie HTML:

<p>Aby utworzyć paragraf, użyj znacznika &lt;p&gt;.</p>
<p>Kosztuje to 10&nbsp;&euro;.</p>
<p>Prawa autorskie &copy; 2025 Moja Firma.</p>
<p>Ten tekst zawiera cudzysłów (&quot;) i apostrof (&apos;).</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?

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:

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 &lt; 5 &amp; 10 &gt; 3. Znak towarowy&trade; kosztuje 50&nbsp;&pound; lub 60&nbsp;&euro;.</p>

<!-- Alternatywnie z encjami numerycznymi -->
<p>Równanie: 2 &#60; 5 &#38; 10 &#62; 3. Znak towarowy&#8482; kosztuje 50&#160;&#163; lub 60&#160;&#8364;.</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:

  1. Wyświetl na stronie zdanie: Aby użyć znacznika , potrzebujesz atrybutu src="obrazek.jpg".
  2. Znajdź i wyświetl za pomocą encji numerycznych symbole strzałek: w lewo (←), w prawo (→), w górę (↑), w dół (↓).
  3. 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ą.