Znaczniki formatowania tekstu oraz znaki specjalne

Formatowanie i znaki w HTML5 · INF.03

Podstawowe znaczniki formatowania tekstu

Znacznik Efekt wizualny Znaczenie semantyczne Przykład użycia
<strong> Pogrubiony Ważny tekst <strong>Ważne</strong>
<b> Pogrubiony Brak (tylko wizualny) <b>Pogrubienie</b>
<em> Kursywa Emfaza (podkreślenie ważności) <em>Podkreślenie</em>
<i> Kursywa Brak (wizualny) <i>Tytuł książki</i>
<u> Podkreślony Brak <u>Podkreślenie</u>
<mark> Podświetlony Zaznaczenie (np. wyniki wyszukiwania) <mark>Wynik</mark>
<small> Zmnniejszony tekst Przypisy, informacje pomocnicze odede><small>Przypis</small>
<s> Przekreślony Tekst usunięty lub nieaktualny <s>Usunięte</s>
<sub> Indeks dolny Wzory chemiczne itp. H<sub>2</sub>O
<sup> Indeks górny Zapisy matematyczne itp. odede>x<sup>2</sup>

Znaki specjalne w HTML

Znaki specjalne, takie jak &, <, >,   i inne, muszą być wpisywane za pomocą encji HTML, aby przeglądarka nie interpretowała ich błędnie.

Znak Encja HTML Opis
&&amp;Znak &
<&lt;Znacznik mniejszości (<)
>&gt;Znacznik większości (>)
 &nbsp;Niełamliwa spacja
"&quot;Podwójny cudzysłów
'&apos;Pojedynczy cudzysłów (apostrof)

Przykładowe formatowanie tekstu

<p>To jest <strong>ważny</strong> tekst z <em>emfazą</em> i <u>podkreśleniem</u>.</p>

<p>Możesz <mark>zaznaczyć</mark> fragment tekstu.</p>

<p>Wzór chemiczny: H<sub>2</sub>O</p>

<p>Matematyka: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

Ćwiczenia praktyczne

Ćwiczenie 1: Wstaw znacznik do pogrubienia wyrazu "ważny" i zaznaczenia fragmentu. 
<p>To jest <strong>ważny</strong> tekst z <mark>emfazą</mark>.</p>

Quiz

<strong>
<b>
&lt;
<
Indeks górny
Indeks dolny

Podsumowanie

Poprawne formatowanie tekstu za pomocą znaczników HTML pozwala na lepszą czytelność i dostępność stron, a zastosowanie znaków specjalnych zabezpiecza poprawne wyświetlanie zawartości.

Znaczniki semantyczne pomagają również wyszukiwarkom i technologiom wspomagającym odczyt treści.

Checklista

Materiały: INF.03 — Formatowanie i znaki specjalne · Opracowanie: Tomasz Puchała © 2025