W języku HTML znacznik <code> służy do oznaczania fragmentu tekstu jako kodu komputerowego. To specjalny element semantyczny, który informuje przeglądarkę oraz czytelników, że zawarta w nim treść powinna być traktowana jako kod źródłowy.
Podstawowe informacje o znaczniku <code>
- Funkcja – podkreślenie fragmentu kodu, np. pojedynczej komendy, funkcji, nazwy pliku czy innego elementu związanego z programowaniem;
- Wygląd domyślny – tekst wewnątrz
<code>zazwyczaj jest wyświetlany czcionką o stałej szerokości (tzw. monospace), co ułatwia odróżnienie kodu od zwykłego tekstu; - Charakter semantyczny – użycie tego znacznika poprawia dostępność strony i ułatwia jej analizę przez narzędzia automatyczne, np. czytniki ekranu lub parsery dokumentów.
Przykłady użycia
- Oznaczenie fragmentu kodu w akapicie
<p>Aby wypisać tekst w języku Python, użyj polecenia <code>print()</code>.</p>
Wynik: Aby wypisać tekst w języku Python, użyj polecenia print().
- Wyróżnianie elementów konfiguracji lub poleceń
<p>Plik konfiguracyjny to zwykle <code>config.json</code>.</p>
Wynik: Plik konfiguracyjny to zwykle config.json.
-
Zagnieżdżenie w znaczniku
<pre>Gdy chcesz wyświetlić sformatowany blok kodu z zachowaniem wcięć i łamań linii, łączysz
<pre>(zachowuje białe znaki i układ tekstu) ze<code>, np.:
<pre><code>def witaj():
print("Witaj, świecie!")</code></pre>
Wynik:
def witaj():
print("Witaj, świecie!")
Częste zastosowania w praktyce
- Podręczniki i instrukcje programowania – oznaczanie nazw funkcji, zmiennych lub parametrów, aby były czytelniejsze dla użytkownika;
- Artykuły techniczne – wyróżnianie krótkich fragmentów kodu („inline code”), np. w opisie algorytmów czy składni języka;
- Dokumentacja API – prezentowanie przykładów wywołań, parametrów lub odpowiedzi serwera.
Pozostałe powiązane znaczniki
Poniżej tabela prezentująca znaczniki często stosowane wraz z <code>:
| Znacznik | Zastosowanie | Przykład użycia |
|---|---|---|
<pre> |
Wstępnie sformatowany tekst (np. blok kodu) | Blok kodu, zachowuje wcięcia |
<samp> |
Przykładowe dane wyjściowe z programu | Wyświetlanie komunikatów programu |
<kbd> |
Dane wejściowe z klawiatury | Pokazanie skrótów klawiaturowych |
<var> |
Zmienna | Wzory matematyczne, nazwy zmiennych |
Przykład integracji kilku tagów:
<p>Wpisz <kbd>Ctrl</kbd> + <kbd>C</kbd>, aby skopiować tekst do schowka.</p>
<p>Rezultat działania to: <samp>Hello, World!</samp></p>
<p>Zmiennej <var>x</var> przypisz wartość <code>10</code>.</p>
Podsumowanie zasad stosowania <code>
- Używaj
<code>dla pojedynczych elementów kodu lub krótkich fragmentów wewnątrz tekstu, - Dla bloków kodu stosuj połączenie
<pre>,...</pre> - Znacznik
<code>jest elementem semantycznym i poprawia jasność oraz dostępność treści, - Możliwa jest dodatkowa stylizacja kodu za pomocą CSS, np. podkreślenie składni albo kolorowanie tła.
Stosowanie znacznika <code> pozwala tworzyć przejrzyste, profesjonalne poradniki oraz dokumentacje – zarówno dla początkujących, jak i zaawansowanych użytkowników.
