Co to jest `height` w HTML?

Atrybut height w HTML to właściwość umożliwiająca ustawienie wysokości wybranych elementów na stronie internetowej. Najczęściej spotyka się go w znacznikach takich jak <img>, <iframe>, <canvas>, <video>, <embed> czy <object>. Służy głównie do kontrolowania pionowego rozmiaru tych elementów, co pomaga w utrzymaniu spójnego układu strony, szybszym ładowaniu oraz lepszej czytelności.

Jak działa atrybut height?

Atrybut height ustala wysokość elementu w pikselach (lub, rzadziej, procentach – głównie zależnie od typu elementu). Umieszczany jest bezpośrednio w znaczniku HTML, np.:

<img src="obraz.png" alt="Opis obrazka" height="150">

W powyższym przykładzie obrazek zostanie wyświetlony z wysokością 150 pikseli.

Najważniejsze zastosowania

Najczęściej atrybutu height używa się w następujących przypadkach:

• Obrazki (<img>) – pozwala zachować miejsce na grafikę podczas ładowania strony, co poprawia stabilność układu. Warto używać równocześnie z atrybutem width, by nie zniekształcać proporcji obrazka;
• Ramki (<iframe>) – pozwala określić dokładną wysokość osadzonej strony lub filmu w oknie ramki;
• Animacje i grafika (<canvas>) – umożliwia kontrolę nad rozmiarem przestrzeni do rysowania w JavaScript;
• Osadzane multimedia (<embed>, <video>, <object>) – promuje spójność wyświetlania treści multimedialnych i lepszą integrację z układem strony.

Składnia

<tagname height="wartość">

• wartość – liczba (np. 200, oznacza 200 px).

Dla jednostek procentowych wsparcie jest ograniczone i dotyczy głównie niektórych elementów osadzania. Zalecane są piksele jako najbardziej przewidywalna wartość.

Przykłady zastosowań

Przykład 1: Obrazek o ustalonej wysokości

<img src="logo.png" alt="Logo firmy" height="80" width="200">

Taki zapis gwarantuje, że obrazek zawsze będzie miał wysokość 80 pikseli, niezależnie od wymiarów oryginalnych pliku.

Przykład 2: Ramka iframe

<iframe src="https://przyklad.pl" width="400" height="300"></iframe>

Ramka iframe wyświetli stronę mieszczącą się dokładnie w polu 400×300 px, co często bywa istotne np. przy osadzaniu map lub filmów.

Przykład 3: Płótno canvas do rysowania

<canvas id="grafika" width="500" height="250" style="border: 1px solid #666;"></canvas>

Ustalenie rozmiaru płótna jest kluczowe, by zapewnić poprawne wyświetlanie rysowanych grafik.

Uwagi praktyczne

• Zachowanie proporcji – jeśli podasz tylko jeden wymiar (np. tylko height), przeglądarka rozciągnie lub skompresuje obrazek, dopasowując go do nowej wysokości, co może prowadzić do zniekształceń. Zawsze ustawiaj oba wymiary lub pilnuj proporcji;
• Działanie na innych elementach – nie wszystkie elementy HTML obsługują height jako atrybut – większość tzw. „pojemników” (np. <div>) wymaga ustawienia wysokości poprzez CSS (style="height:100px;");
• Wydajność i ładowanie – stosowanie atrybutu height na elementach <img> pomaga przeglądarce zarezerwować miejsce w układzie strony już na etapie ładowania, co wyraźnie redukuje tzw. „przeskoki” layoutu.

Podsumowanie

Atrybut height w HTML to podstawa do kontrolowania wysokości elementów medialnych i ramek na stronie. Pozwala na precyzyjne sterowanie wyglądem, ułatwia czytelność oraz poprawia doświadczenie użytkownika, jeśli zostanie użyty świadomie i konsekwentnie. Jego poprawne stosowanie to jeden z kluczowych aspektów profesjonalnego kodowania stron internetowych.