<code> w HTML to element służący do oznaczania fragmentów kodu komputerowego, takich jak instrukcje, polecenia, identyfikatory, nazwy funkcji czy zmienne.
Charakterystyka znacznika <code>
- Tekst wewnątrz
<code>jest wyświetlany w przeglądarce z użyciem czcionki o stałej szerokości (monospace), co wyróżnia kod na tle reszłej treści; - Znacznik nie wprowadza dodatkowego formatowania (np. łamania linii) – jeśli potrzebujesz zachować formatowanie (np. wcięcia, nowe linie), połącz
<code>z<pre>; <code>nie oznacza konkretnego języka programowania – stosuje się go uniwersalnie dla kodu, pseudokodu czy nawet pojedynczych identyfikatorów.
Przykładowe zastosowania <code>
- Oznaczenie pojedynczych poleceń lub deklaracji
<p>Aby zadeklarować zmienną w JavaScript, użyj <code>let</code>.</p>Efekt:
Aby zadeklarować zmienną w JavaScript, użyj let.
- Fragment kodu w tekście instrukcji
<p>Wprowadź komendę <code>npm install</code>, aby zainstalować paczki.</p>Efekt:
Wprowadź komendę npm install, aby zainstalować paczki.
-
Cały blok kodu z zachowaniem łamania linii
Najczęściej łączy się
<code>z<pre>, aby uzyskać blok z zachowanym oryginalnym formatem:
<pre><code>function suma(a, b) {
return a + b;
}</code></pre>Efekt:
function suma(a, b) {
return a + b;
}-
W połączeniu z innymi znacznikami kodowymi
HTML udostępnia również inne znaczniki:
<kbd>– do oznaczania wejścia z klawiatury (np. Ctrl+S);<samp>– do prezentowania przykładowego wyjścia programu;<var>– do wyróżniania zmiennych;<pre>– do zachowania białych znaków i oryginalnego formatowania. Przykład:
<p>Aby zapisać plik, naciśnij <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Komputer wyświetli komunikat: <samp>File saved.</samp></p>
<p>Wzór: <var>x</var> + <var>y</var> = <var>z</var></p>Techniki stylizowania kodu
Mimo że <code> domyślnie wyświetla tekst czcionką stałej szerokości, można zastosować CSS dla lepszej czytelności oraz wyróżnienia kodu na stronie internetowej:
code {
background-color: #eee;
padding: 2px 5px;
border-radius: 3px;
color: #c7254e;
font-family: 'Fira Mono', monospace;
}Dobre praktyki
- Używaj
<code>tylko dla rzeczywiście technicznych fragmentów – unikać nadużywania w zwykłym tekście; - Dla rozbudowanych fragmentów kodu zawsze łącz
<code>z<pre>; - Dla poprawy dostępności możesz stosować atrybuty (np. lang), aby określić język programowania we fragmentach kodu.
Podsumowanie
Znacznik <code> jest podstawowym narzędziem do prezentowania kodu komputerowego w dokumentach HTML. Pozwala czytelnie rozróżnić fragmenty kodu od reszty zawartości strony, a jego funkcjonalność łatwo rozszerzyć przy pomocy CSS czy w połączeniu z innymi znacznikami przeznaczonymi do prezentacji kodu i danych technicznych.
