Tag <samp> – semantyczne oznaczanie wyjścia programu
Tag <samp> w HTML służy do oznaczania przykładowego lub rzeczywistego wyjścia generowanego przez program, takiego jak komunikaty z konsoli, wyniki skryptów czy dane automatycznie wyprodukowane przez aplikację. Dzięki temu nadajemy tekstowi właściwe znaczenie semantyczne, a przeglądarki domyślnie wyświetlają go czcionką monospace, co poprawia czytelność.
Element jest szczególnie przydatny w dokumentacji technicznej, tutorialach programistycznych i na blogach o web developmencie, gdzie chcemy wizualnie i semantycznie odróżnić automatycznie generowany tekst od zwykłej treści. W odróżnieniu od podobnych tagów, <samp> podkreśla właśnie wyjście programu, a nie kod źródłowy czy wejście użytkownika.
Definicja i przeznaczenie tagu <samp>
Zgodnie ze specyfikacją HTML5, <samp> reprezentuje przykładowe wyjście programu komputerowego – czyli próbkę lub rzeczywisty wynik działania programu. Oto typowe przypadki użycia:
- komunikat błędu z aplikacji: „File not found”,
- wygenerowana data logowania: „Czwartek Lipiec 30 08:00:00 2015”,
- wynik skryptu JavaScript wyświetlony w konsoli.
Domyślna stylizacja przeglądarek wygląda następująco:
samp { font-family: monospace; }
Semantyka jest kluczem – użycie <samp> nie tylko poprawia warstwę wizualną, ale także informuje czytniki ekranu i wyszukiwarki, że to dane komputerowe (output), a nie zwykły tekst.
Podstawowy przykład użycia
Oto prosty przykład prezentujący komunikat systemowy w znaczniku <samp>:
<p>Komunikat z mojego komputera:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
Efekt w przeglądarce – tekst wewnątrz <samp> wyświetli się czcionką monospace, a <br> wymusi nową linię, co przypomina rzeczywiste wyjście programu.
W polskim kontekście możemy oznaczyć datę logowania w podobny sposób:
<p>Data ostatniego logowania: <samp>Czwartek Lipiec 30 08:00:00 2015</samp></p>
Użycie <samp> nadaje treści właściwy kontekst oraz czytelny wygląd monospace – idealne dla blogów i dokumentacji o programowaniu.
Porównanie z podobnymi tagami
Aby uniknąć pomyłek, zwróć uwagę na różnice między elementami używanymi w treściach technicznych:
| Tag | Przeznaczenie | Domyślny styl | Przykład użycia |
|---|---|---|---|
<samp> |
Wyjście programu (np. wynik skryptu) | monospace | <samp>Error 404</samp> |
<code> |
Fragment kodu źródłowego | monospace | <code>console.log('Hi');</code> |
<kbd> |
Wciśnięte klawisze użytkownika | monospace (często dodatkowe wyróżnienie) | <kbd>Ctrl + C</kbd> |
<var> |
Nazwa zmiennej lub argumentu | monospace, kursywa | <var>x</var> = 5 |
<pre> |
Preformatowany blok tekstu | monospace, zachowuje białe znaki | Blok kodu z wcięciami |
<samp> jest unikalny, ponieważ skupia się na rezultacie działania (output), a nie na kodzie wejściowym czy interakcji użytkownika.
Wsparcie przeglądarek i atrybuty
<samp> ma doskonałe wsparcie we wszystkich nowoczesnych przeglądarkach:
| Przeglądarka | Wsparcie od wersji |
|---|---|
| Chrome | 1 (2008) |
| Firefox | 1 (2004) |
| Edge | 12 (2015) |
| Opera | 15 (2013) |
| Safari | ≤4 (2009) |
Element obsługuje globalne atrybuty HTML (np. class, id, style, title) oraz atrybuty zdarzeń (np. onclick). Nie jest przestarzały – w razie potrzeby stylowanie rozszerzysz w CSS.
Zaawansowane przykłady w praktyce
1. Symulacja konsoli w tutorialu JavaScript
Pokaż wynik działania funkcji w konsoli, wyraźnie odróżniając output od kodu:
<h3>Wynik funkcji w JavaScript:</h3>
<p>Po wywołaniu <code>console.log(mojaFunkcja());</code> otrzymałem:</p>
<p><samp>["jabłko", "banan", "pomarańcza"]</samp></p>
2. Logi z aplikacji webowej z CSS
Dodaj styl dla lepszego efektu wizualnego i czytelności:
.samp-log {
background-color: #f4f4f4;
padding: 10px;
border-left: 4px solid #007acc;
border-radius: 4px;
}
Przykładowe użycie w HTML:
<p><samp class="samp-log">2026-03-20 15:00:00 | Użytkownik zalogowany pomyślnie</samp></p>
3. Kombinacja z innymi tagami w dokumentacji
Łącz <samp> z <kbd> i <var>, aby pokazać pełen kontekst interakcji:
<p>Użytkownik wpisał: <kbd>nazwa.pl</kbd></p>
<p>Program odpowiedział: <samp>Domena dostępna. Cena: 50 PLN/rok.</samp></p>
<p>Użyj zmiennej: <var>domains</var> = checkAvailability(<var>input</var>);</p>
4. Dynamiczne wyjście w JavaScript
Wstaw dynamicznie generowane dane JS bezpośrednio do elementu <samp>:
<!DOCTYPE html>
<html>
<head>
<title>Przykładowy samp z JS</title>
</head>
<body>
<p>Aktualny czas: <samp id="czas"></samp></p>
<script>
document.getElementById('czas').textContent = new Date().toLocaleString();
</script>
</body>
</html>
Treści w <samp> zachowują krój monospace także wtedy, gdy są podstawiane dynamicznie.
Najlepsze praktyki i pułapki
Aby korzystać z <samp> efektywnie i konsekwentnie, trzymaj się poniższych wskazówek:
- Używaj oszczędnie – stosuj tylko dla rzeczywistych wyjść programu, a nie zwykłego tekstu;
- Styluj świadomie w CSS – w razie potrzeby nadpisz
font-familyi dodaj tło lub obramowanie dla spójności z projektem; - Zadbaj o dostępność – semantyka pomaga czytnikom ekranu prawidłowo zakomunikować, że to przykładowe wyjście;
- Nie myl z
<code>–<code>oznacza kod źródłowy, a<samp>jego wynik działania; - Frameworki (React/Vue) – używaj jak zwykłego elementu HTML i pamiętaj o właściwym escapingu znaków.