Znaki specjalne HTML to gotowy zbiór symboli graficznych, które możemy wywołać z poziomu HTML oraz CSS.
Poza tym podczas tworzenia stron internetowych za pomocą HTML, czasami konieczne jest użycie znaków takich jak strzałki, symbole, interpunkcja, matematyczne, które mają specjalne znaczenie w kodzie HTML lub które mogą być trudne do wpisania na klawiaturze. Dodatkowo HTML dostarcza mechanizmów pozwalających na wstawianie tych znaków za pomocą tzw. encji (ang. entities).
Znaki specjalne w HTML
Przede wszystkim znaki specjalne HTML to sekwencje znaków zaczynające się od & (ampersand) i kończące na ; (średnik), które reprezentują znaki o specjalnym znaczeniu. Przykładowo, w HTML znak < jest używany do otwierania tagów, więc aby wstawić go jako zwykły tekst, musimy użyć odpowiedniej encji <.
Załóżmy, że do odnośnika na naszej stronie chcemy dodać strzałkę. Odpowiednio w kodzie HTML będzie to wyglądało następująco:
<p><a href="#top">Dalej →</a></p>Przykład
Znaki specjalne w CSS
Z kolei w CSS, znaki specjalne są często używane w kontekście pseudo-elementów ::before i ::after, gdzie możemy wstawiać specjalne znaki i symbole jako treść generowaną dynamicznie. Poniżej przedstawię kilka najczęściej używanych encji i sposobów ich wykorzystania w CSS.
Teraz dodamy znak specjalny z poziomu CSS:
<p><a class="strzalka" href="#top">Dalej</a></p>a.strzalka :after { content: "\2191"; }Przykład
Strzałki
| Kod HTML | Encja | Podgląd |
|---|---|---|
← | \2190 | ← |
↑ | \2191 | ↑ |
&rarr | \2192 | → |
↓ | \2193 | ↓ |
↔ | \2194 | ↔ |
↕ | \2195 | ↕ |
↖ | \2196 | ↖ |
↗ | \2197 | ↗ |
↘ | \2198 | ↘ |
↙ | \2199 | ↙ |
↰ | \21B0 | ↰ |
↱ | \21B1 | ↱ |
↲ | \21B2 | ↲ |
↳ | \21B3 | ↳ |
↵ | \21B5 | ↵ |
↶ | \21B6 | ↶ |
↷ | \21B7 | ↷ |
↺ | \21BA | ↺ |
⇐ | \21D0 | ⇐ |
⇑ | \21D1 | ⇑ |
⇒ | \21D2 | ⇒ |
⇓ | \21D3 | ⇓ |
⇔ | \21D4 | ⇔ |
⇕ | \21D5 | ⇕ |
⇖ | \21D6 | ⇖ |
⇗ | \21D7 | ⇗ |
⇘ | \21D8 | ⇘ |
⇙ | \21D9 | ⇙ |
Symbol waluty
| Kod HTML | Encja | Podgląd |
|---|---|---|
$ | \0024 | $ |
£ | \00A3 | £ |
€ | \20AC | € |
¥ | \00A5 | ¥ |
Matematyczne
| Kod HTML | Encja | Podgląd |
|---|---|---|
+ | \002B | + |
− | \2212 | − |
× | \00D7 | × |
÷ | \00F7 | ÷ |
= | \003D | = |
≠ | \2260 | ≠ |
| \003C | < |
> | \003E | > |
° | \00B0 | ° |
¹ | \00B9 | ¹ |
² | \00B2 | ² |
³ | \00B3 | ³ |
ƒ | \0192 | ƒ |
% | \0025 | % |
‰ | \0089 | ‰ |
‱ | \2031 | ‱ |
∗ | \2217 | ∗ |
∘ | \2218 | ∘ |
√ | \221A | √ |
∞ | \221E | ∞ |
¼ | \00BC | ¼ |
½ | \00BD | ½ |
¾ | \00BE | ¾ |
⅓ | \2153 | ⅓ |
⅔ | \2154 | ⅔ |
Interpunkcja
| Kod HTML | Encja | Podgląd |
|---|---|---|
! | \0021 | ! |
" | \0022 | „ |
# | \0023 | # |
% | \0025 | % |
& | \0026 | & |
' | \0027 | ’ |
( | \0028 | ( |
) | \0029 | ) |
* | \002A | * |
, | \002C | , |
| | . |
/ | \002F | / |
: | \003A | : |
; | \003B | ; |
? | \003F | ? |
@ | \0040 | @ |
[ | \005B | [ |
\ | \005C | \ |
] | \005D | ] |
{ | \007B | { |
| | \007C | | |
} | \007D | } |
§ | \00A7 | § |
© | \00A9 | © |
® | \00AE | ® |
« | \00AB | « |
» | \00BB | » |
‘ | \2018 | ‘ |
’ | \2019 | ’ |
‚ | \201A | ‚ |
“ | \201C | “ |
” | \201D | ” |
„ | \201E | „ |
Znaki specjalne HTML – podsumowanie
Reasumując znaki specjalne HTML umożliwiają wyświetlanie symboli i znaków, które mają specjalne znaczenie lub nie są dostępne na standardowej klawiaturze. Używając encji HTML, możemy łatwo wyświetlać znaki takie jak <, >, &, a także symbole walut, znaki diakrytyczne i inne. Dlatego opanowanie użycia znaków specjalnych jest kluczowe dla tworzenia kompletnych dokumentów HTML, szczególnie w kontekście wyświetlania specjalnych znaków i symboli.