Tag <meter> w HTML5 to element służący do wizualizacji skalarnej wartości w określonym zakresie, np. poziomu naładowania baterii, użycia dysku czy procentowego wyniku. Reprezentuje miernik (gauge), który przeglądarki renderują jako graficzny pasek lub wskaźnik z czytelną alternatywą tekstową.
Do czego służy tag <meter>?
Element <meter> jest idealny do wyświetlania mierzalnych wielkości, gdzie znamy granice minimalną i maksymalną. Oto przykładowe zastosowania:
- poziom użycia dysku (np. 60% zajętości),
- procent głosów w wyborach,
- wynik testu (np. 5/10 punktów),
- średnia ocen w systemie edukacyjnym,
- poziom trafności wyszukiwania.
W odróżnieniu od tagu <progress>, który pokazuje postęp zadania, <meter> reprezentuje stałą wartość w danym momencie, np. aktualne zużycie zasobów.
Składnia podstawowa – użyj następującej formy, jeśli znasz zakres i wartość:
<meter value="wartość" min="0" max="10">Tekst alternatywny</meter>
Tag wymaga zamykającego znacznika oraz treści fallback wewnątrz, która będzie widoczna w środowiskach bez wsparcia graficznego.
Kluczowe atrybuty tagu <meter>
Poniższa tabela podsumowuje podstawowe atrybuty i ich znaczenie:
| Atrybut | Opis | Wartość domyślna | Typ wartości |
|---|---|---|---|
| value | Aktualna wartość miernika (musi być między min a max). | Brak (wymagany) | Liczba |
| min | Dolna granica zakresu. | 0 | Liczba |
| max | Górna granica zakresu. | 1 | Liczba |
| low | Dolna granica „niskiej” wartości (żółty alert w niektórych przeglądarkach). | Brak | Liczba |
| high | Górna granica „wysokiej” wartości (czerwony alert). | Brak | Liczba |
| optimum | Optymalna wartość (zielony kolor w optymalnym przedziale). | Brak | Liczba |
| form | ID formularza, do którego należy miernik. | Brak | ID |
Ważne ograniczenia – wartość value nie może być mniejsza niż min ani większa niż max. Przeglądarki automatycznie dostosowują kolory na podstawie low, high i optimum.
Podstawowe przykłady użycia
1. Prosty miernik wyniku (np. punktacja)
Poniżej znajduje się minimalny przykład osadzony w dokumencie HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Miernik wyniku</title>
</head>
<body>
<p>Punkty zawodnika A: <meter value="5" min="0" max="10">5 z 10</meter></p>
<p>Wynik zawodnika B: <meter value="0.5">50% ze 100%</meter></p>
</body>
</html>
Rezultat – dwa paski: jeden na 50% (5/10), drugi również na 50% (domyślny max=1).
2. Średnia ocen z zakresami semantycznymi
Tak ustawisz progi low/high oraz optimum, aby pokazać kontekst wartości:
<fieldset>
<legend>Średnia ocen klasy III OK</legend>
<label>Średnia: <meter min="1" max="6" low="2.5" high="5" optimum="4" value="3.5">3.5</meter></label>
</fieldset>
Efekt – pasek pokazuje 3.5/6. Wartości poniżej 2.5 to „low” (żółty), powyżej 5 to „high” (czerwony), 4 to optimum (zielony).
Zaawansowane strefy kolorów z low, high i optimum
Przeglądarki (np. Chrome, Firefox) interpretują kolory na podstawie położenia value względem granic. Ogólny podział wygląda tak:
- Zielony (optimum) – wartość w optymalnym przedziale;
- Żółty (ostrzeżenie) – wartość w strefie low/high;
- Czerwony (alarm) – wartość poza optimum.
Tabela stref (uproszczona) – zestawienie zachowań dla różnych relacji granic:
| Pozycja value | Optimum < low < high | Low < optimum < high | Low < high < optimum |
|---|---|---|---|
| value < low < high | Zielony | Żółty | Czerwony |
| low < value < high | Żółty | Zielony | Żółty |
| low < high < value | Czerwony | Żółty | Zielony |
Przykład z kolorami – miernik z progami i wartością pośrodku:
<meter value="3" min="1" max="6" low="2.5" high="5" optimum="4">3/6</meter>
Uwaga – zachowanie na granicach progów może się różnić między przeglądarkami, dlatego zawsze testuj konfigurację w docelowych środowiskach.
Stylizacja CSS dla <meter>
Domyślny wygląd zależy od przeglądarki. Aby uzyskać spójny efekt, dodaj własne style i użyj prefiksów vendorowych.
Przykładowa stylizacja z gradientem i obsługą WebKit/Firefox:
meter {
width: 200px;
height: 20px;
background: #ddd;
border-radius: 10px;
}
meter::-webkit-meter-bar {
background: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
border-radius: 10px;
}
meter::-webkit-meter-optimum-value {
background: #00ff00;
border-radius: 10px;
}
meter::-moz-meter-bar {
background: #ddd;
border-radius: 10px;
}
Tak osadzisz element w HTML:
<meter value="0.7" min="0" max="1">70%</meter>
Wskazówka – w nowych przeglądarkach możesz użyć appearance: none dla pełnej kontroli nad wyglądem, zapewnij jednak sensowny fallback.
Integracja z JavaScript – dynamiczne aktualizacje
Tag <meter> świetnie współpracuje z JS przy zmianach w czasie rzeczywistym. Oto prosty symulator użycia dysku:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Dynamiczny meter</title>
<style>
meter { width: 300px; height: 25px; }
</style>
</head>
<body>
<label for="disk">Użycie dysku C: <meter id="disk" min="0" max="100" low="70" high="90" optimum="50" value="0">0%</meter></label>
<button onclick="updateDisk()">Aktualizuj</button>
<script>
function updateDisk() {
const usage = Math.floor(Math.random() * 101); // Losowa wartość 0-100
const meter = document.getElementById('disk');
meter.value = usage;
meter.title = usage + '% użycia'; // Tooltip
console.log('Użycie: ' + usage + '%');
}
// Auto-update co 2s
setInterval(updateDisk, 2000);
</script>
</body>
</html>
Efekt – pasek dynamicznie zmienia wartość, kolor i dymek podpowiedzi. Idealne do dashboardów i monitoringu.
Dobre praktyki i pułapki
Przed wdrożeniem pamiętaj o poniższych zasadach:
- Semantyka – używaj tylko do skalarnych wartości ze znanym zakresem, nie do nieokreślonych progresów (użyj
<progress>); - Dostępność – zawsze dodaj treść alternatywną wewnątrz tagu, aby była czytelna dla czytników ekranu;
- Kompatybilność – szeroko wspierany w nowoczesnych przeglądarkach; brak natywnego wsparcia w Internet Explorer; fallback: tekst;
- Błędy – nie pomijaj tagu zamykającego, nie używaj ujemnych wartości i nie wychodź poza zakres min–max;
- Responsywność – ustaw
widthw % lubemdla lepszej adaptacji na urządzeniach mobilnych; - Formularze – łącz z
<label>i atrybutemformw obrębie formularzy.
Podsumowujące przykłady w praktyce
Poniższe fragmenty pokazują, jak wpleść <meter> w typowe scenariusze:
Panel fitness – prosty miernik dziennego celu kalorii:
<p>Kalorie spalone: <meter value="750" min="0" max="2000" optimum="1500">750/2000</meter></p>
Użycie pamięci RAM – procentowe zużycie w czasie rzeczywistym:
<meter value="0.8" low="0.6" high="0.9" max="1">80% RAM</meter>
Tag <meter> jest prosty, semantyczny i wizualnie czytelny – używaj go, by Twoje dane były bardziej zrozumiałe na pierwszy rzut oka.