Ja zaczynam od tego rozróżnienia, bo od razu porządkuje ono hierarchię treści. Jeśli to główny hero na stronie, wewnątrz może pojawić się `

`. Jeśli to tylko moduł w środku podstrony, wybieram niższy poziom nagłówka zgodny z resztą dokumentu. Gdy ten podział jest jasny, można przejść do kodu, który działa w praktyce.

Najprostszy układ, który możesz wkleić do projektu

Ja zwykle buduję taki blok z trzech elementów: krótkiego wyróżnika, głównego komunikatu i jednego działania, które użytkownik ma wykonać dalej. Dzięki temu baner nie wygląda jak ściana tekstu, tylko jak konkretny, czytelny punkt wejścia.

  

    
Frontend
    
Baner, który prowadzi użytkownika dalej
    
Krótki komunikat, który mówi, co tu znajdzie i dlaczego warto kliknąć.
    Zobacz szczegóły
  

.hero-banner {
  display: flex;
  align-items: end;
  min-height: 360px;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(12, 20, 35, 0.82), rgba(12, 20, 35, 0.38)),
    url("banner.jpg") center / cover no-repeat;
}

.hero-banner__content {
  position: relative;
  max-width: 560px;
}

.hero-banner__eyebrow {
  margin: 0 0 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.hero-banner h3 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  line-height: 1.05;
}

.hero-banner p {
  margin: 0 0 1.25rem;
  max-width: 42ch;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.6;
}

.hero-banner__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.875rem 1.25rem;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  text-decoration: none;
  font-weight: 700;
}

W tym wariancie tło buduje nastrój, ale treść pozostaje czytelna nawet wtedy, gdy obraz wczyta się później albo w ogóle nie będzie dostępny. Jeśli ten sam układ ma być głównym tytułem landing page, zamień `

Przeczytaj również: Element HTML - Jak używać, by kod był czytelny?

` na `` i dopasuj hierarchię do reszty strony. Kiedy szkielet już działa, trzeba jeszcze zdecydować, czy obraz ma być treścią, czy tylko tłem. Grafika w tle czy element ``

To jedna z ważniejszych decyzji, bo od niej zależy i semantyka, i późniejsza elastyczność kodu. Ja najczęściej myślę o tym tak: jeśli obraz tylko wspiera przekaz, używam CSS. Jeśli obraz niesie informację, którą użytkownik powinien odebrać także bez stylów, wybieram `` albo ``.

Jeśli ten sam materiał ma wyglądać inaczej na desktopie i na telefonie, `` zwykle daje czystsze rozwiązanie niż ręczne docinanie wszystkiego w CSS. Z kolei przy zdjęciu w tle pamiętam o `background-size: cover`, a przy `` o `object-fit: cover`, bo oba mechanizmy pomagają utrzymać proporcje bez rozciągania obrazu. To z kolei prowadzi do responsywności, bo ten sam układ musi wyglądać dobrze na kilku szerokościach.

Jak zrobić, żeby układ nie rozsypał się na telefonie

Na małym ekranie najbardziej bolą trzy rzeczy: za duży tekst, zbyt wysoka sekcja i źle przycięty obraz. Dlatego w responsywnym banerze trzymam się płynnych wartości, a nie sztywnej wysokości wpisanej raz na zawsze.

• Używaj `clamp()` do odstępów i wielkości fontów, żeby układ sam się skalował.
• Rezerwuj miejsce przez `min-height` albo `aspect-ratio`, zamiast czekać, aż obraz dociągnie resztę layoutu.
• Jeśli obraz ma ważny punkt w kadrze, ustaw `object-position` albo `background-position`, żeby go nie obciąć przypadkiem.
• Trzymaj główny komunikat w 1-2 liniach, bo długi nagłówek na mobile szybko robi bałagan.
• Dbaj o przycisk: minimalny obszar dotyku to praktycznie 44 x 44 px, inaczej klik staje się niewygodny.
• Jeśli desktop i mobile wymagają zupełnie innego kadru, użyj osobnego obrazu dla małego ekranu zamiast liczyć na cud.

W praktyce dobrze działa też ograniczenie szerokości tekstu do około 40-45 znaków na linię. Dzięki temu baner nie wygląda na przeładowany, a wzrok szybciej trafia w CTA. Sama responsywność nie wystarczy jednak wtedy, gdy układ jest ciężki albo trudno z niego korzystać, więc trzeba jeszcze dopilnować dostępności i wydajności.

Dostępność i wydajność, które naprawdę robią różnicę

To jest ten fragment, który często pomija się na etapie prototypu, a potem naprawia pod presją terminu. Ja traktuję go jako obowiązkowy, bo nawet ładny blok traci sens, jeśli łamie dostępność albo spowalnia stronę.

• Jeśli używasz ``, wpisz sensowny `alt`, a gdy obraz jest czysto dekoracyjny, zostaw pusty atrybut.
• Zadbaj o kontrast między tekstem a tłem, bo na jasnych zdjęciach napisy bardzo łatwo znikają.
• Rezerwuj miejsce na obraz przez `width` i `height` albo `aspect-ratio`, żeby uniknąć przesunięć layoutu podczas ładowania.
• Nie dawaj `loading="lazy"` obrazowi, który ma być widoczny od razu nad zagięciem strony.
• Kompresuj grafiki i używaj nowoczesnych formatów, gdy to ma sens, bo bannery często należą do najcięższych elementów strony.
• Unikaj agresywnych animacji i migotania, jeśli nie są absolutnie potrzebne.

Tu szczególnie ważna jest uczciwość wobec użytkownika: baner ma pomagać, a nie zmuszać do walki z interfejsem. Jeśli CTA jest czytelne, a obraz nie kradnie treści, całość działa znacznie lepiej niż najbardziej efektowna animacja. Na koniec zostaje kilka błędów, które najłatwiej wyłapać przed publikacją.

Co sprawdzić przed publikacją takiego bloku

Przed wdrożeniem robię krótką kontrolę jakości i zwykle znajduję problemy szybciej niż w długim code review. Wystarczy pięć minut, żeby wyłapać rzeczy, które później psują odbiór całej sekcji.

• Czy komunikat jest krótki i konkretny, czy tylko „ładnie brzmi”.
• Czy CTA jest widoczne od razu i nie ginie w tle.
• Czy obraz nie jest rozciągnięty, przycięty w złym miejscu albo zbyt ciężki.
• Czy układ nie przeskakuje podczas ładowania treści.
• Czy hierarchia nagłówków pasuje do reszty strony i nie łamie semantyki.
• Czy wersja mobilna nadal wygląda jak ten sam projekt, a nie jego przypadkowa redukcja.

W praktyce najlepszy baner HTML to taki, który wygląda pewnie, ale nie wymaga od użytkownika wysiłku. Jeśli zaczniesz od prostego układu, dobrze dobierzesz obraz i dopilnujesz responsywności, dostaniesz sekcję, która naprawdę wspiera treść strony zamiast tylko zajmować miejsce.