Atrybut height to właściwość HTML i CSS określająca pionowy wymiar elementu na stronie internetowej — podawana w pikselach, procentach lub innych jednostkach CSS. Definiuje, ile miejsca w pionie zajmuje dany element: obraz, ramka iframe, komórka tabeli czy dowolny kontener. Poprawne ustawienie tego atrybutu ma bezpośredni wpływ zarówno na wygląd strony, jak i jej wydajność techniczną.
- Atrybut
heightokreśla wysokość elementu HTML w jednostkach bezwzględnych (px) lub względnych (%, vh). - Dla obrazów jego brak powoduje przesunięcia layoutu (Cumulative Layout Shift), co obniża wynik Core Web Vitals.
- W CSS
heightdziała inaczej niż w atrybucie HTML — warto znać różnicę. - Responsywność wymaga ostrożnego stosowania stałych wartości height.
Jak atrybut height działa w praktyce
Height w HTML vs. height w CSS
Atrybut height może być stosowany na dwa sposoby: jako atrybut bezpośrednio w znaczniku HTML (<img height="300">) lub jako właściwość w arkuszu stylów CSS (height: 300px). Oba podejścia ustawiają wysokość elementu, ale mają istotne różnice w zachowaniu i priorytecie. Styl CSS zawsze nadpisuje atrybut HTML, więc jeśli w arkuszu stylów zdefiniujesz height: auto, wartość atrybutu HTML zostanie zignorowana. W nowoczesnym web developmencie zaleca się zarządzanie wymiarami przez CSS, natomiast atrybuty HTML (width i height) pozostają niezbędne dla obrazów — przeglądarka potrzebuje ich przed załadowaniem zasobu, żeby z góry zarezerwować miejsce w layoutcie.
Jednostki i dozwolone wartości
Wartość atrybutu height w CSS można wyrazić na wiele sposobów, a wybór jednostki wpływa na responsywność projektu. Najczęściej stosowane opcje:
| Jednostka | Opis | Przykład zastosowania |
|---|---|---|
px | Piksele — wartość bezwzględna | Ikony, elementy o stałej wysokości |
% | Procent wysokości elementu nadrzędnego | Kontenery wypełniające rodzica |
vh | Procent wysokości widocznego obszaru (viewport) | Sekcje hero na pełny ekran |
em / rem | Wielokrotność rozmiaru fonta (lokalnego / root) | Elementy skalowane z typografią |
auto | Automatyczne dopasowanie do zawartości | Obrazy z zachowanym aspect ratio |
min-content / max-content | Wartości oparte na treści wewnętrznej | Elastyczne layouty CSS Grid/Flexbox |
Atrybut height dla obrazów — szczególny przypadek
Dla elementów <img> jednoczesne podanie atrybutów width i height to jeden z fundamentalnych wymogów technicznej optymalizacji strony. Gdy przeglądarka pobiera HTML, nie wie jeszcze, jak duży jest obraz — bez tych atrybutów zarezerwuje zero miejsca, a po załadowaniu grafiki przesunie całą resztę treści w dół. To właśnie powoduje Cumulative Layout Shift (CLS), jeden ze wskaźników Core Web Vitals, za który Google obniża pozycje w wynikach wyszukiwania. Rekomendacja Google jest jednoznaczna: każdy obraz powinien mieć jawnie zdefiniowane oba atrybuty. Przeglądarka na tej podstawie oblicza współczynnik proporcji (aspect ratio) i rezerwuje odpowiedni obszar jeszcze przed pobraniem pliku graficznego.
Właściwości pokrewne: min-height i max-height
Samo height to nie jedyna opcja — CSS oferuje uzupełniające właściwości kontrolujące wysokość w sposób elastyczny. min-height gwarantuje, że element nie będzie niższy niż podana wartość, nawet gdy jego zawartość jest pusta. max-height z kolei ogranicza maksymalną wysokość, co bywa przydatne przy rozwijanych sekcjach FAQ czy panelach akordeonowych — element rośnie do pewnej granicy, a nadmiar treści można obsłużyć przez overflow: auto. W responsywnych layoutach często łatwiej osiągnąć pożądany efekt przez kombinację min-height i height: auto niż przez stałą wartość pikselową.
Znaczenie atrybutu height dla SEO i widoczności
Atrybut height wpływa na SEO przede wszystkim przez pryzmat Core Web Vitals, a konkretnie wskaźnika CLS (Cumulative Layout Shift). Google oficjalnie włączyło Core Web Vitals do czynników rankingowych — strony, które unikają niespodziewanych przesunięć layoutu, zyskują przewagę nad tymi, gdzie brakuje atrybutów wymiarów obrazów i osadzonych zasobów. Dobry wynik CLS to wartość poniżej 0,1; strony bez atrybutów width/height na obrazach bardzo łatwo przekraczają ten próg, szczególnie na wolniejszych połączeniach mobilnych.
Height ma też znaczenie pośrednie: wpływa na Largest Contentful Paint (LCP), gdy dotyczy obrazu będącego głównym elementem widoku. Przeglądarka szybciej wyrenderuje layout i priorytetyzuje pobieranie właściwych zasobów, jeśli zna wymiary z góry. W kontekście audytu SEO brak atrybutów wymiarów na obrazach to jeden z pierwszych błędów technicznych, które wykrywa się narzędziami takimi jak Lighthouse czy PageSpeed Insights.
Dla stron opartych na dużej liczbie grafik — sklepów internetowych, portfolio czy serwisów informacyjnych — systematyczne uzupełnianie atrybutów height i width to jeden z prostszych technicznie, a jednocześnie wymiernie skutecznych kroków optymalizacyjnych. Przy pozycjonowaniu sklepów internetowych z setkami produktów poprawa CLS przez uzupełnienie atrybutów wymiarów potrafi przełożyć się na wyraźny wzrost oceny technicznej w Google Search Console.
FAQ
Czy atrybut height w HTML działa tak samo jak właściwość height w CSS?
Nie — choć obie opcje ustawiają wysokość elementu, różnią się priorytetem i zachowaniem. Właściwość CSS zawsze nadpisuje atrybut HTML. Atrybut HTML jest czytany przez przeglądarkę wcześniej, przed załadowaniem arkusza stylów, dlatego dla obrazów warto stosować oba jednocześnie: atrybut HTML do rezerwacji przestrzeni w layoutcie i CSS do kontroli responsywności.
Jak ustawić height, żeby obraz był responsywny?
Najczęstszym wzorcem jest ustawienie w CSS height: auto przy jednoczesnym podaniu width: 100% — obraz wypełnia wtedy dostępną szerokość, zachowując oryginalne proporcje. Atrybuty HTML width i height nadal warto zachować w znaczniku, bo przeglądarka obliczy z nich aspect ratio i zarezerwuje odpowiednią przestrzeń przed załadowaniem grafiki, co zapobiega CLS.
Co się stanie, jeśli height elementu zostanie ustawione na 0?
Element o wysokości 0 będzie niewidoczny w layoutcie, ale nadal istnieje w DOM. Jego zawartość może wystawać poza kontener (jeśli overflow nie jest ustawione na hidden) lub zostać ukryta. To technika używana m.in. w animowanych rozwinięciach (accordion), gdzie element przechodzi od height: 0 do docelowej wartości za pomocą CSS transition.
Czym różni się height od line-height?
height określa całkowitą wysokość kontenera elementu, natomiast line-height kontroluje odstęp między liniami tekstu wewnątrz elementu inline lub blokowego. Są to odrębne właściwości — line-height wpływa na czytelność typografii i pionowe wycentrowanie tekstu w jednolinijkowych przyciskach, ale nie zastępuje height w kontrolowaniu rozmiarów bloków.
Height — mały atrybut, realne konsekwencje dla wydajności
Poprawne stosowanie atrybutu height to techniczna podstawa, która przekłada się na wyniki mierzalne w Google Search Console i odczuwalne przez użytkowników. Jeśli chcesz sprawdzić, czy Twoja strona traci punkty Core Web Vitals przez brakujące wymiary obrazów lub inne błędy techniczne, zespół Webiti chętnie przeprowadzi pełny audyt SEO i wskaże konkretne obszary do poprawy w ramach kompleksowego pozycjonowania stron.
