W dzisiejszym wpisie na naszym blogu o HTML, CSS i JavaScript przyglądamy się bliżej elementowi <var>. Ten semantyczny znacznik służy do oznaczania zmiennych, parametrów funkcji, niewiadomych matematycznych i stałych w treści technicznej, co poprawia czytelność, dostępność i spójność dokumentacji.
Element <var> jest szczególnie przydatny w artykułach edukacyjnych, dokumentacjach technicznych i na blogach o programowaniu – wszędzie tam, gdzie pojawia się kod lub wzory matematyczne. W przeglądarkach domyślnie bywa renderowany kursywą (italic), ale jego siła tkwi w semantyce, nie w stylach.
Czym dokładnie jest element <var>?
Zgodnie ze specyfikacją HTML, <var> reprezentuje zmienną w szerokim ujęciu. Obejmuje to:
- niewiadome w wyrażeniach matematycznych – np.
(x + y = 7)to zapis z niewiadomymixiy; - zmienne lub stałe w kodzie źródłowym – np. w JavaScript
let userName,const PI; - parametry funkcji – np.
function suma(a, b)wykorzystuje parametryaib; - symbole wielkości fizycznych – np.
vjako prędkość w równaniu ruchu.
Element należy do kategorii zawartości frazowej (phrasing content) i jest wyświetlany inline, dzięki czemu nie przerywa ciągłości tekstu. Obsługuje wyłącznie atrybuty globalne (np. id, class, style) oraz zdarzeniowe (np. onclick).
Ważne: <var> nie jest przestarzały, ma pełne wsparcie we współczesnych przeglądarkach, a jego domyślny styl to font-style: italic; display: inline;.
Podstawowe przykłady użycia elementu <var>
Zacznijmy od prostych przykładów, które możesz od razu skopiować i przetestować.
1. Zmienna w wyrażeniu matematycznym
Skopiuj i wklej ten kod do pliku HTML, aby wyróżnić zmienne w równaniu:
<p>Pole trójkąta oblicza się wzorem: (1/2 × <var>b</var> × <var>h</var>), gdzie <var>b</var> to podstawa, a <var>h</var> to wysokość.</p>
Efekt: litery oznaczające zmienne (b i h) zostaną wyróżnione semantycznie i domyślnie wyświetlone kursywą.
2. Zmienna w kodzie programistycznym
Tak oznaczysz nazwę zmiennej we fragmencie kodu:
<p>W JavaScript deklarujemy zmienną tak: <code>let <var>wysokosc</var> = 120;</code></p>
Efekt: wewnątrz <code> nazwa zmiennej zostaje dodatkowo wyróżniona przez <var>, co zwiększa czytelność.
3. Parametry funkcji
Poniżej przykład oznaczenia parametrów funkcji:
<p>Funkcja <code>suma(<var>a</var>, <var>b</var>)</code> zwraca ich sumę.</p>
Te przykłady pokazują, jak <var> integruje się z innymi elementami semantycznymi, takimi jak <code>, <samp> czy <kbd>.
Kontekst użycia i ograniczenia
Element <var> można umieszczać w elementach akceptujących treści frazowe (np. <p>, <article>, <section>). Jako element potomny przyjmuje tekst i inne elementy frazowe, ale nie elementy blokowe.
Najważniejsze fakty w skrócie:
| Aspekt | Szczegóły |
|---|---|
| Elementy nadrzędne | <p>, <span>, <article>, inne elementy treści frazowej |
| Elementy potomne | tekst, elementy frazowe (np. <strong>, <em>) |
| Znaczniki | obowiązkowe: otwierający i zamykający (<var>...</var>) |
| Atrybuty | brak obowiązkowych; globalne i zdarzeniowe (np. class, onclick) |
| CSS display | inline (domyślnie) |
| Wsparcie przeglądarek | pełne (Chrome, Firefox, Safari, Edge) |
Uwaga: nie pomijaj tagu zamykającego – składnia wymaga obu znaczników. Element nie jest dozwolony w sekcji <head>.
Stylowanie elementu <var> za pomocą CSS
Domyślne italic zwykle wystarcza, ale w profesjonalnych publikacjach warto spójnie dopracować styl. Oto przykładowe reguły:
/* Podstawowe nadpisanie */
var {
font-style: italic;
font-family: 'Courier New', monospace; /* styl kodowy */
background-color: #f0f8ff;
padding: 2px 4px;
border-radius: 3px;
}
/* Efekt po najechaniu kursorem */
var:hover {
background-color: #e6f3ff;
color: #0066cc;
}
/* Responsywność */
@media (max-width: 768px) {
var {
font-size: 1.1em; /* większy rozmiar na mobile */
}
}
Pełny przykład HTML + CSS z własnym stylem dla <var>:
<!DOCTYPE html>
<html lang="pl">
<head>
<style>
var {
font-style: italic;
font-family: monospace;
color: #007bff;
padding: 0.1em 0.3em;
}
</style>
</head>
<body>
<p>Równanie: <var>x</var>² + <var>y</var> = 5</p>
</body>
</html>
Efekt: zmienne w równaniu są wyraźnie wyróżnione stylem monospace i kolorem.
Jeśli chcesz dodać interakcję w JavaScript, możesz podkreślać zmienne po kliknięciu:
document.querySelectorAll('var').forEach((el) => {
el.addEventListener('click', () => {
el.style.textDecoration = 'underline';
});
});
Zaawansowane zastosowania w praktyce
1. W dokumentacji API lub tutorialach JS
Tak zaznaczysz metodę i jej parametr w tekście instruktażowym:
<p>Metoda <code>array.<var>filter</var>(<var>callback</var>)</code> zwraca nową tablicę.</p>
2. Wzory fizyczne i naukowe
Przykład z podstawowym wzorem na prędkość:
<p>Prędkość: <var>v</var> = <var>s</var> / <var>t</var></p>
3. Porównanie z pokrewnymi tagami
Poniższa tabela podsumowuje różnice między elementami używanymi w treściach technicznych:
| Tag | Zastosowanie | Przykład |
|---|---|---|
<var> |
zmienne, parametry | <var>x</var> |
<code> |
fragmenty kodu | console.log() |
<samp> |
wyjście programu | <samp>Hello World</samp> |
<kbd> |
wejście użytkownika | <kbd>Ctrl + C</kbd> |
Używaj ich razem, aby osiągnąć pełną i precyzyjną semantykę treści.
4. Dostępność (a11y)
Czytniki ekranu (np. NVDA) rozpoznają <var> jako zmienną, co wspiera zrozumienie wzorów i fragmentów kodu. Dla większej precyzji dodaj opis:
<var aria-label="zmienna x">x</var>
Najczęstsze błędy i dobre praktyki
Poniżej znajdziesz skróconą listę zasad, które pomogą uniknąć problemów i utrzymać spójną semantykę:
- błąd – używanie
<var>do czystego stylowania bez uzasadnienia semantycznego; - dobra praktyka – w kontekście programistycznym łącz
<var>z<code>dla lepszej czytelności; - błąd – pomijanie tagu zamykającego; zawsze wymagany;
- dobra praktyka – testuj semantykę i dostępność w narzędziach takich jak WAVE lub Lighthouse;
- umiarkowanie – stosuj
<var>wyłącznie do rzeczywistych zmiennych, nie do długich fraz lub całych zdań.