Co to jest `meter` w HTML?

<meter> w HTML to element służący do prezentacji pomiaru skalarnego w określonym, znanym zakresie, czyli wartości liczbowej mieszczącej się między ustalonym minimum i maksimum. Stanowi on graficzny „miernik”, na przykład do wskazania poziomu wykorzystania zasobów, siły sygnału czy jakości hasła.

Kiedy używać elementu <meter>

• Gdy chcesz pokazać wartość w znanym zakresie, np. użycie dysku (0–100 GB), liczbę punktów, temperaturę czy siłę hasła,
• nie używaj <meter> do wskazywania stanu postępu na osi czasu (np. ładowanie pliku) – do tego służy <progress>.

Składnia i kluczowe atrybuty

Element <meter> otacza się atrybutami, które określają, jak interpretować daną wartość:

• value – obligatoryjny. Określa aktualną mierzoną wartość;
• min – najniższa możliwa wartość miernika (domyślnie 0);
• max – najwyższa możliwa wartość miernika (domyślnie 1);
• low – wartość uznawana za niską;
• high – wartość uznawana za wysoką;
• optimum – wartość uznawana za optymalną;
• form – powiązanie z konkretnym formularzem (rzadziej używane).

Przykład prostej składni:

<meter value="60" min="0" max="100"></meter>

Ten miernik wizualizuje np. 60% zużycia dysku na skali 0–100.

Przykłady zastosowań

Wyświetlanie poziomu wykorzystania zasobów

<label for="storage">Wykorzystanie dysku:</label>
<meter id="storage" value="70" min="0" max="100" low="30" high="90" optimum="50"> 70/100 GB </meter>

Ten przykład pokazuje, że zużycie dysku jest na poziomie 70 GB. Zakres „low” (do 30) wyznacza niskie zużycie, powyżej 90 – wysokie. Optimum wskazuje preferowaną wartość (tu: 50 GB).

Określanie siły hasła podczas rejestracji

<label for="passwordStrength">Siła hasła:</label>
<meter id="passwordStrength" value="0.7" min="0" max="1" low="0.2" high="0.8" optimum="1"></meter>

Podczas wpisywania hasła, wartość value może być dynamicznie aktualizowana JavaScriptem.

Ocena trafności wyników wyszukiwania

<label for="relevance">Trafność najtrafniejszego wyniku:</label>
<meter id="relevance" value="8" min="0" max="10" low="3" high="9" optimum="10"></meter>

Praktyczne wskazówki

• Dostępność – dodawaj zawsze powiązany <label>, by miernik był czytelny dla technologii wspomagających;
• Personalizacja – treść między otwierającym a zamykającym tagiem <meter> można wykorzystać jako tekst alternatywny, np. wartość liczbową dla starszych przeglądarek lub czytników ekranu;
• Wygląd – wygląd <meter> zależy od systemu operacyjnego i przeglądarki. Jeśli zależy ci na pełnej kontroli, użyj stylowania CSS lub rozważ własny komponent.

Podsumowanie najważniejszych atrybutów <meter>

Stosowanie <meter> podnosi czytelność danych liczbowych w interfejsie oraz poprawia dostępność – jest on rozpoznawany przez czytniki ekranu jako miernik. To narzędzie do prezentacji pomiarów liczbowych, które warto wykorzystać w nowoczesnych serwisach i aplikacjach internetowych.